Gif Picker React | Live Demo

An Tenor GIF picker component for React applications that runs on Tenor API V2. This picker fits styling of emoji-picker-react and can be used next to it.

What to know before using

• In order to access Tenor API you are required to provide API key. This is a free and simple process that takes less than 60 seconds.
• Tenor requires attribution from products that use their API. This library comply with that rule by adding Search Tenor placeholder to the search bar.

Installation

npm install gif-picker-react

Obtaining Tenor API v2 key

In order to use GifPicker element you are required to provide Tenor API key via tenorApiKey prop. To obtain this key please follow this simple guide:

1. Login in to Google Cloud Console
2. Create a new project
3. In Google Cloud Marketplace navigate to Tenor API
4. Click on Enable
5. In navigation menu go to APIs and services tab and select Credentials
6. Click + create credentials and create API key, copy generated API key
7. Pass this key as prop to tenorApiKey

Usage

import GifPicker from 'gif-picker-react';

function App() {
  return (
    <div>
      
    </div>
  );
}

Props

The following props are accepted by the picker:

TenorImage

This object is provided as an argument to callback specified in onGifClick:

TenorImagePreview

This object is used for displaying the preview image gifs in the picker. You can use it to render smaller and lower-resolution versions of the gifs.

This is an example TenorImage object:

{
  id: "16596569648018104856",
  tenorUrl: "https://tenor.com/view/american-psycho-patrick-bateman-american-psycho-gif-7212093",
  shortTenorUrl: "https://tenor.com/Eqmf.gif",
  description: "American Psycho Patrick Bateman GIF",
  createdAt: Date,
  tags: [ "American Psycho", "Patrick Bateman", "American", "psycho"],
  url: "https://media.tenor.com/5lLcKZgmIhgAAAAC/american-psycho-patrick-bateman.gif",
  height: 240,
  width: 244,
  preview: {
    url: "https://media.tenor.com/5lLcKZgmIhgAAAAM/american-psycho-patrick-bateman.gif",
    height: 120,
    width: 122
  }
}

Customization

Custom Picker Width and Height

To customize the dimensions of the picker, use the height and width props. You can pass in a number that will be treated as pixel size, or your any accepted css width/height as string.

CSS Variables

The picker can be customized via CSS variables. The root selector for the picker is .GifPickerReact, when overriding, make sure to provide a more specific selector.

The list of possible variables is quite extensive, but the main ones you may want to override are:

• --gpr-bg-color - Background color of the picker.
• --gpr-text-color - Font color on the picker.
• --gpr-highlight-color - Color on the hover on focus on some search bar, categories and gif.

You can find full list of all variables in GifPickerReact.css.

Contributing

Want to contribute to the project?

First of all, thanks! Check CONTRIBUTING.md for more details.