Gif Picker React Control

A React component that offers a GIF picker control with a GIF search engine powered by Tenor API V2.

Before using

You need to provide a Tenor API V2 key in order to use this component. You can obtain a key from here.

Installation

npm install gif-picker-react

or

yarn add gif-picker-react

Usage

import { GifPicker } from "react-gif-picker-control";

const App = () => {
    return (
        <div>
            <GifPicker
                tenorApiKey={"YOUR_API_KEY"}
                onGifClick={"YOUR_FUNCTION_TO_HANDLE_THE_GIF_SELECTION"}
            />
        </div>
    );
};

Props

Required

| Prop | Type | Description | | ----------- | ---------- | ------------------------------------------------------------------------------------------------------------- | | tenorApiKey | string | Your Tenor API key for powering the GIF search engine | | onGifClick | function | Callback function triggered when a GIF is clicked. The function has one parameter which is Gif object |

Optional

| Property | Type | Default value | Description | | -------------- | --------- | ------------- | ----------------------------------------- | | searchLimit | number | 50 | Define the limit for search results | | hideCategories | boolean | false | Hide or show GIF categories in the picker | | autoFocus | boolean | true | Auto-focus on the GIF search input |

Styling

| Property | Type | Default value | Description | | -------- | -------------- | -------------------------------------------------------------------------------- | ---------------------------------------------- | | colors | ColorPalette | { primary: '#424242', accent: '#FFA25F', background: '#676767', text: '#FFF' } | Customize the color palette of the GIF picker | | width | number | 350 | Set custom width for the GIF picker container | | height | number | 450 | Set custom height for the GIF picker container |

Images

| Property | Type | Default value | Description | | ----------------- | -------- | ------------------------------------------------------------------------------- | ----------------------------------------- | | imageErrorUrl | string | The Simpsons | Image src for displaying GIF error state | | imageNoResultsUrl | string | South Park | Image src for displaying no results state |

Gif

| Property | Type | Description | | ----------- | -------- | ------------------------------------------- | | id | string | Tenor result ID | | description | string | A brief description associated with the GIF | | urlPreview | string | The URL of a thumbnail for the GIF | | urlMedia | string | The URL of the actual GIF media file | | width | number | The width of the GIF in pixels | | height | number | The height of the GIF in pixels | | createdAt | Date | The date when the GIF was created or added |

Other screens

Error

No results