React-gif-picker-control NPM

Gif Picker React Control

demo

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

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