react-tenor
A React component for selected GIFs from Tenor.
Getting started
First, addreact-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 importreact-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 theTenor
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
TheTenor
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 runningyarn 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
.