mrbartusek / gif-picker-react

Tenor GIF Picker component for React ⚛️

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>
      <GifPicker tenorApiKey={"YOUR_API_KEY"} />
    </div>
  );
}

Props

The following props are accepted by the picker:

Prop	Type	Default	Description
tenorApiKey	string	Required	Tenor v2 API key, obtained from Google Cloud Console
onGifClick	function		Callback function that is called when an gif is clicked. The function receives the TenorImage object as a parameter.
theme	Theme	Theme.LIGHT	Controls the theme of the picker. If you are using Typescript you can use Theme enum. Possible values are light, dark and auto.
autoFocusSearch	boolean	true	Controls the auto focus of the search input.
contentFilter	ContentFilter	ContentFilter.OFF	Controls the Tenor Content filtering options. If you are using Typescript you can use ContentFilter enum. Possible values are high, medium, low, off
clientKey	string	gif-picker-react	Name of your application. Used to differentiate multiple applications using same API key.
country	string	US	Specify the country of origin for the request. To do so, provide its two-letter ISO 3166-1 country code.
locale	string (xx_YY)	en_US	Specify the default language to interpret the search string. xx is the language's ISO 639-1 language code, while the optional _YY value is the two-letter ISO 3166-1 country code.
width	number / string	350	Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.
height	number / string	450	Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.
categoryHeight	number / string	100	Controls the height of the home page reaction category. You can provide a number that will be treated as pixel size, or your any accepted css width as string.

TenorImage

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

Property	Type	Description
id	string	Tenor result identifier
tenorUrl	string	The full URL to view the post on tenor.com
shortTenorUrl	string	Short URL to view the post on tenor.com
description	string	Textual description of the content. You can use this do populate image object alt attribute
createdAt	Date	Date object that represents when this post was created.
tags	string[]	Array of tags for the post
url	string	Direct URL to the image source
height	number	Height of the image in pixels
width	number	Width of the image in pixels
preview	TenorImagePreview	Gif preview object with dimensions scaled down

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.

Property	Type	Description
url	string	Direct URL to the preview image source
height	number	Height of the preview image in pixels
width	number	Width of the preview image in pixels

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.

<GifPicker height={500} width={400} />

<GifPicker height="100%" width="15em" />

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.

gif-picker-react's Issues

Add trending category

Add loading placeholders

Add codepen example

https://codesandbox.io/s/emoji-picker-react-4-z2gkzp

Add disabled property

Hello,

is there a chance to add a disabled property to be able to be able to control the disabled state?

Thank you and keep up the good work.

Infinite scrolling

Add github pages example

Support Vanilla JS

this is exactly what i was looking for but it just had to be for react... could you please make it pure js.

Feature: Adding prop for search input placeholder

Adding an option to change the default "Search Tenor" placeholder in the search input for a custom one.

Write tests

Write an readme

Feature: Right-to-left (RTL) direction support

Adding support for RTL direction for languages such as Hebrew or Arabic.

Add register share call

Gif picker react contentFilter is not working

So I was using gif-picker-react:'1.3.2 and this is how I was using the gif picker in my code ,I was trying to pass contentFilter as OFF


but still i am getting those contents

Add more stuff to `package.json`

Dynamically set columns count

The code for generating columns is hard-coded for two as of now:

https://github.com/MrBartusek/gif-picker-react/blob/master/src/components/body/GifList.tsx#L43-L63

That means the picker looks good with the default or similar to the default width but will look horribly on other ones:

This count of columns should be dynamically set depending on the picker's width. This also means the height of the categories which is controlled by categoryHeight should be removed or replaced with something like categoryAspectRatio since it too, will be dynamic.

Error Handling

Imagine what happens if I provide a wrong api key?
There should be a onError handler so that I can explicitly see if my api key is wrong? like I refreshed my tenor api key.

Update hero image to gif