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.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/CultureHQ/react-tenor.

License

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