GIPHY SDK for Web

The React SDK consists of Gif, Grid, and Carousel components. It uses the Fetch API to fetch data. All React SDK components also support Server Side Rendition(SSR). Here's a codesandbox for an example of SSR with next.js

Not using React? We have vanilla JavaScript components as well: Gif, Grid, and Carousel.

Installation

Install using npm or yarn:

yarn add @giphy/react-components @giphy/js-fetch-api

Checkout the github repo here.

Getting started

Here is a basic example of how to render a Grid of gifs using the Grid component and the Fetch API. You'll need an API key to fetch data that will be used to populate your components. You can apply for an API key here.

import { Grid } from '@giphy/react-components'
import { GiphyFetch } from '@giphy/js-fetch-api'

// use @giphy/js-fetch-api to fetch gifs, instantiate with your api key
const gf = new GiphyFetch('your api key')

// configure your fetch: fetch 10 gifs at a time as the user scrolls (offset is handled by the grid)
const fetchGifs = (offset: number) => gf.trending({ offset, limit: 10 })

// Render the React Component and pass it your fetchGifs as a prop
ReactDOM.render(<Grid width={800} columns={3} fetchGifs={fetchGifs} />, target)

See the SDK in action

Live edit our SDK components here and try it out for yourself!

Learn more

• Fetch API - Wraps fetches to the GIPHY API and returns typed response. Fetch trending, search, related, emoji and more.
• React SDK - UI Component library using React.
• JavaScript SDK - UI Components you can append to the DOM.