GIPHY JS SDKs

A complete search experience is built by wrapping components in a SearchContextManager. This manager uses React.Context to facilitate communication between the SearchBar and visual components like Grid or Carousel.

Implementation Pattern

1. Wrap your application (or search section) in <SearchContextManager apiKey={...} />.
2. Use the useContext(SearchContext) hook in child components to access fetchGifs and searchKey.
3. Pass the searchKey as a key prop to your results component (e.g., Grid) to ensure the component re-mounts and resets when the search term changes.

Components in the Search Experience

• SearchContextManager: The provider that manages the search state and API configuration.
• SearchBar: The input field for user queries.
• SuggestionBar: (Optional) Displays trending searches and username/channel matches (e.g., @nba).
• Grid / Carousel: The visual components that consume fetchGifs to display results.

import { useContext } from 'react'
import {
    Grid,
    SearchBar,
    SearchContext,
    SearchContextManager,
    SuggestionBar,
} from '@giphy/react-components'

const SearchExperience = () => (
    <SearchContextManager apiKey={webSDKKey}>
        <Components />
    </SearchContextManager>
)

const Components = () => {
    const { fetchGifs, searchKey } = useContext(SearchContext)
    return (
        <>
            <SearchBar />
            <SuggestionBar />
            <Grid key={searchKey} columns={3} width={800} fetchGifs={fetchGifs} />
        </>
    )
}

The utility provides several functions to help you choose the most efficient media asset (image or video) based on your UI requirements:

Rendition Selection

• _bestfit: Finds the image rendition that best fits a given width and height.
• _getBestRendition: Returns the best rendition object based on a width and height (utilizes _bestfit).
• _getBestVideo: Returns the best video rendition object based on a width and height (utilizes _bestfit).
• _getBestRenditionUrl: Returns the best rendition URL based on width and height, factoring in WebP availability and video usage (utilizes _getBestRendition).
• _getSpecificRendition: Retrieves a specific rendition while factoring in WebP, sticker, and video availability.

Dimension Helpers

• _getGifHeight: Quickly calculates the height for a GIF based on a provided width.
• _getGifWidth: Quickly calculates the width for a GIF based on a provided height.

Accessibility

• _getAltText: Retrieves the alt text used for displaying GIFs.

To refresh a Grid or Carousel when a search term changes (e.g., via an input field), use Svelte's {#key} block. By wrapping the component in {#key term}, Svelte will destroy and re-mount the component whenever the term variable changes, triggering a fresh fetchGifs call with the new term.

When using {#key}, you should manage initialGifs carefully to ensure the component doesn't attempt to use stale data from the previous search.

<script lang="ts">
    import { Grid } from '@giphy/svelte-components'
    import { GiphyFetch } from '@giphy/js-fetch-api'
    const gf = new GiphyFetch('YOUR_API_KEY')
    
    let term = 'initial term'
    let initialGifs = [] // data from SSR
</script>

<input bind:value={term} />

{#key term}
    <Grid
        initialGifs={term === 'initial term' ? initialGifs : []}
        width={600}
        fetchGifs={(offset) => gf.search(term, { offset, limit: 10 })}
    />
{/key}