{"id":16726217,"url":"https://github.com/mrbartusek/gif-picker-react","last_synced_at":"2025-08-18T19:44:45.104Z","repository":{"id":64844465,"uuid":"576701329","full_name":"MrBartusek/gif-picker-react","owner":"MrBartusek","description":"Tenor GIF Picker component for React ⚛️","archived":false,"fork":false,"pushed_at":"2023-10-21T16:04:37.000Z","size":19834,"stargazers_count":29,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T00:20:05.238Z","etag":null,"topics":["gif","gif-picker","react","react-component","react-library","reactjs","tenor","tsup","typescript"],"latest_commit_sha":null,"homepage":"http://dokurno.dev/gif-picker-react/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MrBartusek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-10T17:44:37.000Z","updated_at":"2024-06-18T13:12:36.155Z","dependencies_parsed_at":"2024-06-18T13:12:08.519Z","dependency_job_id":"35b57f47-9c47-479f-b8ba-75f66cf83180","html_url":"https://github.com/MrBartusek/gif-picker-react","commit_stats":{"total_commits":148,"total_committers":2,"mean_commits":74.0,"dds":"0.10135135135135132","last_synced_commit":"ad419c2367ebaa43295c383733142c3b73b12970"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrBartusek%2Fgif-picker-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrBartusek%2Fgif-picker-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrBartusek%2Fgif-picker-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MrBartusek%2Fgif-picker-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MrBartusek","download_url":"https://codeload.github.com/MrBartusek/gif-picker-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243836015,"owners_count":20355615,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gif","gif-picker","react","react-component","react-library","reactjs","tenor","tsup","typescript"],"created_at":"2024-10-12T22:52:31.331Z","updated_at":"2025-03-17T01:31:35.208Z","avatar_url":"https://github.com/MrBartusek.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gif Picker React | [Live Demo](https://dokurno.dev/gif-picker-react/)\n\n[![npm](https://img.shields.io/npm/v/gif-picker-react)][npm]\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/MrBartusek/gif-picker-react/build.yml?branch=master)](https://github.com/MrBartusek/gif-picker-react/actions)\n[![npm bundle size](https://img.shields.io/bundlephobia/min/gif-picker-react)](https://bundlephobia.com/package/gif-picker-react)\n[![downloads](https://img.shields.io/npm/dw/gif-picker-react)][npm]\n\n[npm]: https://www.npmjs.com/package/gif-picker-react\n\n![demo](./demo.gif)\n\nAn [Tenor](https://tenor.comt) GIF picker component for React applications that runs on [Tenor API V2](https://developers.google.com/tenor/guides/quickstart). This picker fits styling of [emoji-picker-react](https://www.npmjs.com/package/emoji-picker-react) and can be used next to it.\n\n## What to know before using\n\n- 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.\n- Tenor requires [attribution]([https://developers.google.com/tenor/guides/attribution]) from products that use their API. This\n  library comply with that rule by adding *Search Tenor* placeholder to the search bar.\n\n## Installation\n\n```bash\nnpm install gif-picker-react\n```\n\n## Obtaining Tenor API v2 key\n\nIn order to use `GifPicker` element you are required to provide Tenor API key via\n`tenorApiKey` prop. To obtain this key please follow this simple guide:\n\n1. Login in to [Google Cloud Console](https://console.cloud.google.com)\n1. Create a [new project](https://console.cloud.google.com/projectcreate)\n1. In Google Cloud Marketplace navigate to [Tenor API](https://console.cloud.google.com/marketplace/product/google/tenor.googleapis.com)\n1. Click on `Enable`\n1. In navigation menu go to *APIs and services* tab and select [Credentials](https://console.cloud.google.com/apis/credentials)\n1. Click `+ create credentials` and create *API key*, copy generated API key\n1. Pass this key as prop to `tenorApiKey`\n\n## Usage\n\n```js\nimport GifPicker from 'gif-picker-react';\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cGifPicker tenorApiKey={\"YOUR_API_KEY\"} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Props\n\nThe following props are accepted by the picker:\n\n| Prop | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| tenorApiKey | `string` | **Required** | Tenor v2 API key, obtained from [Google Cloud Console](https://console.cloud.google.com) |\n| onGifClick | `function` | | Callback function that is called when an gif is clicked. The function receives the [`TenorImage`](#tenorimage) object as a parameter. |\n| 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`.\n| autoFocusSearch | `boolean` | `true` | Controls the auto focus of the search input. |\n| contentFilter | `ContentFilter` | `ContentFilter.OFF` | Controls the Tenor [Content filtering](https://developers.google.com/tenor/guides/content-filtering) options. If you are using Typescript you can use `ContentFilter` enum. Possible values are `high`, `medium`, `low`, `off`  |\n| clientKey | `string` | `gif-picker-react` | Name of your application. Used to differentiate multiple applications using same API key. |\n| country | `string` | `US` | Specify the country of origin for the request. To do so, provide its two-letter [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1#Current_codes) country code. |\n| locale | `string (xx_YY)` | `en_US` | Specify the default language to interpret the search string. xx is the language's [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) language code, while the optional _YY value is the two-letter [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1#Current_codes) country code.\n| 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.\n| 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.\n| 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.\n| initialSearchTerm | `string` | | Sets the initial search term when the picker is opened.\n\n### TenorImage\n\nThis object is provided as an argument to callback specified in `onGifClick`:\n\n| Property      | Type       | Description |\n| ------------- | ---------- | ----------- |\n| id            | `string`   | Tenor result identifier |\n| tenorUrl      | `string`   | The full URL to view the post on [tenor.com](https://tenor.com/) |\n| shortTenorUrl | `string`   | Short URL to view the post on [tenor.com](https://tenor.com/) |\n| description   | `string`   | Textual description of the content. You can use this do populate image object `alt` attribute |\n| createdAt     | `Date`     | Date object that represents when this post was created. |\n| tags          | `string[]` | Array of tags for the post |\n| url           | `string`   | Direct URL to the image source |\n| height        | `number`   | Height of the image in pixels |\n| width         | `number`   | Width of the image in pixels |\n| preview       | `TenorImagePreview` | Gif preview object with dimensions scaled down |\n\n### TenorImagePreview\n\nThis 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.\n\n| Property      | Type       | Description |\n| ------------- | ---------- | ----------- |\n| url           | `string`   | Direct URL to the preview image source |\n| height        | `number`   | Height of the preview image in pixels |\n| width         | `number`   | Width of the preview image in pixels |\n\nThis is an example `TenorImage` object:\n\n```js\n{\n  id: \"16596569648018104856\",\n  tenorUrl: \"https://tenor.com/view/american-psycho-patrick-bateman-american-psycho-gif-7212093\",\n  shortTenorUrl: \"https://tenor.com/Eqmf.gif\",\n  description: \"American Psycho Patrick Bateman GIF\",\n  createdAt: Date,\n  tags: [ \"American Psycho\", \"Patrick Bateman\", \"American\", \"psycho\"],\n  url: \"https://media.tenor.com/5lLcKZgmIhgAAAAC/american-psycho-patrick-bateman.gif\",\n  height: 240,\n  width: 244,\n  preview: {\n    url: \"https://media.tenor.com/5lLcKZgmIhgAAAAM/american-psycho-patrick-bateman.gif\",\n    height: 120,\n    width: 122\n  }\n}\n```\n\n## Customization\n\n### Custom Picker Width and Height\n\nTo 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.\n\n```jsx\n\u003cGifPicker height={500} width={400} /\u003e\n```\n\n```jsx\n\u003cGifPicker height=\"100%\" width=\"15em\" /\u003e\n```\n\n### CSS Variables\n\nThe 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.\n\nThe list of possible variables is quite extensive, but the main ones you may want to override are:\n\n- `--gpr-bg-color` - Background color of the picker.\n- `--gpr-text-color` - Font color on the picker.\n- `--gpr-highlight-color` - Color on the hover on focus on some search bar, categories and gif.\n\nYou can find full list of all variables in [GifPickerReact.css](https://github.com/MrBartusek/gif-picker-react/blob/master/src/GifPickerReact.css).\n\n## Contributing\n\nWant to contribute to the project?\n\nFirst of all, thanks! Check [`CONTRIBUTING.md`](CONTRIBUTING.md) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrbartusek%2Fgif-picker-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrbartusek%2Fgif-picker-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrbartusek%2Fgif-picker-react/lists"}