Giphy alternatives

Animated GIFs continue to be a popular way to express emotions and reactions across the web and social media. In this comprehensive, 2600+ word tutorial, you’ll learn how to use the powerful Giphy API to generate and display animated GIFs programmatically in a React application. We’ll cover key topics like:Getting up and running with the Giphy APIMaking API requests from React Displaying animated GIFs in your user interfaceAdding interactivity with forms, state, and eventsAdvanced techniques like error handlingStyling and animating for a polished UXSecurity and best practices when using 3rd party APIsOther capabilities of the Giphy platformUse cases and examples to inspire your own implementationsBy the end, you’ll level up your skills with React, APIs, styling, animations and more as we build a complete animated GIF generator app!Why Use the Giphy API?Before we dive in, let‘s discuss why the Giphy API is so popular.Massive Library of Animated GIFsAs of 2023, Giphy offers over 700 million GIFs and stickers spanning categories like reactions, entertainment, sports and more. Such an extensive library ensures developers can find just the right GIF for their use case.Well Documented APIsGiphy provides comprehensive documentation and SDKs for their API in JavaScript, Python, Java, Objective-C and more. This makes integration easy for all tech stacks.Flexibility The Giphy API has endpoints allowing developers to search GIFs by keyword, trending topics, translate text to GIFs, emoji trends and much more. Build anything from GIF search apps to animated conversations.EngagementGIFs lead to higher engagement on sites and apps through emotion and storytelling. Integrating Giphy supercharges UX with smiles and delight!Now let’s dive into building our own app for animated GIF generation!Getting Set UpWe’ll use Create React App to quickly scaffold a project:npx create-react-app gifgencd gifgenThis provides a standalone React build configured for development.Now install the Giphy client SDK:npm install @giphy/js-fetch-apiThis wraps the Giphy API in easy to use JavaScript functions.Next, grab your API key from Giphy Developers by creating a new app. Make API CallsWith the key, we can now import the SDK and make API requests:// App.jsimport { GiphyFetch } from ‘@giphy/js-fetch-api‘;const gf = new GiphyFetch(process.env.REACT_APP_GIPHY_API_KEY);The gf instance will handle communicating with Giphy’s API.Let’s test it:const getTrending = async () => { const { data } = await gf.trending({ limit: 25 }); console.log(data);}getTrending(); We use the trending endpoint to fetch popular GIFs with a limit of 25 results. The data is logged showing it works!As async/await is still relatively new,

Their ever expanding index of human expression and emotion!FAQHere are some common questions around building with the Giphy API:What authentication does the API require?You need to obtain an API key from developers.giphy.com. No account needed for public API access.Is there a limit on requests?The public API allows up to 1,000 requests per day for experimentation. Higher usage tiers available.Can I use GIFs commercially? Yes absolutely. Rigorously follow any content licenses though – some only allow personal + non-commercial usage.How are creator attributions passed through the API? Metadata around GIF artists and creators are available in the responses. Displaying is highly encouraged where possible.What bindings and SDKs does Giphy support?SDKs are offered for Javascript, Python, Java, Kotlin, Swift and Objective-C. REST API allows any language.Still have a question? Check Giphy’s FAQ or contact them!Key TakeawaysWe covered a lot of ground developing a full GIF generator app with React + Giphy! Let’s recap:Set up a React dev environment with Create React App Used the Giphy JS SDK to simplify API integrationsAdded state, effects and event handling for interactivity Displayed Giphy trending and search results as GIFsImplemented forms for user generated contentHandled errors to prevent application crashesExplored use cases across industries Discussed best practices for ethical content re-useStyled our UI with CSS for great looking appsAnimations via Framer Motion to delight usersCompared Giphy to alternate platformsYou‘re now equipped to start developing your own ideas with Giphy including:Chat platforms enhanced by expressive GIFsTools for creators and artists to manage their GIF portfolios Next generation emotive advertising formatsSocial networking with reactions powered by GIFsSeamlessly integrated into any digital experience!The sky‘s the limit when you combine the image processing power of Giphy with the component driven approach of React.Thanks for following along – happy GIFing! Dr. Alex Mitchell is a dedicated coding instructor with a deep passion for teaching and a wealth of experience in computer science education. As a university professor, Dr. Mitchell has played a pivotal role in shaping the coding skills of countless students, helping them navigate the intricate world of programming languages and software development.Beyond the classroom, Dr. Mitchell is an active contributor to the freeCodeCamp community, where he regularly shares his expertise through tutorials, code examples, and practical insights. His teaching repertoire includes a wide range of languages and frameworks, such as Python, JavaScript, Next.js, and React, which he presents in an accessible and engaging manner.Dr. Mitchell’s approach to teaching blends

Where Giphy will help us a lot.We go to Giphy and click on the button: Create a new GIF or Sticker. Then on the button: Select GIF or video from the device. We look for the animations and activate the button: Use. In this new view we are going to add a link and labels, these are very important for when users from all over the world use our animations.I always recommend entering your username and searching for words related to your animation, in my case for example they could be the tags: kawai, emote, cry, eyes, anime, chibi, reaction, etc.Once we have finished, we click on the button: Upload to Giphy. And ready! We have uploaded our animated emote to Giphy. If we click on it to look at it we can see that it has a message at the bottom, this tells us that it is being analyzed by the Giphy platform, we must wait a few hours. While we upload the other animations we made in the tutorial, obtaining a total of 3 new animated emotes. And after a few hours we look at our animations again, if the message appears: Available on Giphy it is because your animated emotes can now be used by you as well as by anyone around the world. 8. Animated Emotes on Instagram Below you can see how I use my animated emotes for my Instagram Stories (you can also use them for Instagram Reels or TikTok videos)When creating an Instagram Story we select Sticker - Gif, and write our username (it's easier to find) and in my case, I have all these animated Stickers/Emotes.Other people can use them by writing the words we use on the labels. I choose one and we can use it in our Instagram Stories. 9. Farewell I hope this article has inspired you so that you can create your own animated emotes, as you can see, you can use them on the social network you want.See you in the next TIP!