React-tenor NPM

react-tenor

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)} />

Styles

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.

Props

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`	`"api.tenor.com/v1"`	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.

Functions

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.