TypeScript icon, indicating that this package has built-in type declarations

2.2.0 • Public • Published


Build Status Package Version

A React component for selected GIFs from Tenor.

Getting started

First, add react-tenor to your package.json dependencies, then install using either npm install or yarn install. Then, get your API key from tenor. Finally, you can add the selector component by adding:

<Tenor token="your-token-here" onSelect={result => console.log(result)} />


To get the styles, be sure it import react-tenor/dist/styles.css into your application. You can style it appropriately for your app by overriding the CSS classes used internally. They are listed in styles.css.


Below is a list of all of the props you can pass to the Tenor component.

Name Type Default Description
autoFocus boolean false Indicates that the search bar of the component should request focus when it first mounts.
base string "" The base of the API that this component hits.
contentFilter string "mild" The content filter that gets passed up to tenor. See the tenor API docs for details.
contentRef Ref null A ref to the div that the Tenor component renders.
defaultResults boolean false Indicates that the component should automatically search for trending results if the search input is empty.
initialSearch string "" The starting value of the search bar.
limit number 12 The number of results to return for each search.
locale string "en_US" The locale that gets passed up to tenor. See the tenor API docs for details.
mediaFilter string "minimal" The media filter that gets passed up to tenor. See the tenor API docs for details.
onSelect Result => void A callback for when the user selects a GIF.
searchPlaceholder string "Search Tenor" The placeholder that is applied to the search input field.
token string The tenor API token. See the tenor API docs for details.


The Tenor component additionally has a focus() member function that can be called to request focus be placed on the search input.

Testing locally

You can run the tests by running yarn test and lint by running yarn lint. You can run the local server by running yarn start which will start the docs server on http://localhost:8080.


Bug reports and pull requests are welcome on GitHub at


The code is available as open source under the terms of the MIT License.




Package Sidebar


npm i react-tenor

Weekly Downloads






Unpacked Size

46.3 kB

Total Files


Last publish


  • kddeisz