A React component that offers a GIF picker control with a GIF search engine powered by Tenor API V2.
You need to provide a Tenor API V2 key in order to use this component. You can obtain a key from here.
npm install gif-picker-react
or
yarn add gif-picker-react
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>
);
};
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 |
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 |
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 |
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 |
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 |