{"id":13527616,"url":"https://github.com/ealush/emoji-picker-react","last_synced_at":"2025-10-07T09:00:03.109Z","repository":{"id":21414060,"uuid":"91800758","full_name":"ealush/emoji-picker-react","owner":"ealush","description":"The most popular React Emoji Picker","archived":false,"fork":false,"pushed_at":"2025-10-02T18:24:30.000Z","size":93521,"stargazers_count":1283,"open_issues_count":60,"forks_count":200,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-10-02T20:29:39.724Z","etag":null,"topics":["component","emoji","emoji-picker","emoji-picker-react","emojis","hacktoberfest","picker","react","react-emoji-picker","reactjs"],"latest_commit_sha":null,"homepage":"https://ealush.com/emoji-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/ealush.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"ealush"}},"created_at":"2017-05-19T11:50:11.000Z","updated_at":"2025-10-01T01:32:47.000Z","dependencies_parsed_at":"2023-02-16T11:31:10.019Z","dependency_job_id":"f3d3311a-91c2-45eb-a99e-10e45e860c55","html_url":"https://github.com/ealush/emoji-picker-react","commit_stats":{"total_commits":514,"total_committers":26,"mean_commits":19.76923076923077,"dds":"0.27626459143968873","last_synced_commit":"4cec43e239c94da61ce1aa7f44e5eced5ee7457d"},"previous_names":["ealush/emoji-picker"],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/ealush/emoji-picker-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ealush%2Femoji-picker-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ealush%2Femoji-picker-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ealush%2Femoji-picker-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ealush%2Femoji-picker-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ealush","download_url":"https://codeload.github.com/ealush/emoji-picker-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ealush%2Femoji-picker-react/sbom","scorecard":{"id":363697,"data":{"date":"2025-08-11","repo":{"name":"github.com/ealush/emoji-picker-react","commit":"fbb8a9f17f3287579c39eed4dc26b26aa5959c2e"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.4,"checks":[{"name":"Maintained","score":10,"reason":"9 commit(s) and 12 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":3,"reason":"Found 11/30 approved changesets -- score normalized to 3","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 11 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"76 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-876r-hj45-fw7g","Warn: Project is vulnerable to: GHSA-v63x-xc9j-hhvq","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-w5q7-3pr9-x44w","Warn: Project is vulnerable to: GHSA-3fjq-93xj-3f3f","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-653v-rqx9-j85p","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-vfrc-7r7c-w9mx","Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9","Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2","Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj","Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9","Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w","Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg","Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96","Warn: Project is vulnerable to: GHSA-3949-f494-cm99","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548","Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx","Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T11:22:59.741Z","repository_id":21414060,"created_at":"2025-08-18T11:22:59.741Z","updated_at":"2025-08-18T11:22:59.741Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278502164,"owners_count":25997709,"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","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["component","emoji","emoji-picker","emoji-picker-react","emojis","hacktoberfest","picker","react","react-emoji-picker","reactjs"],"created_at":"2024-08-01T06:01:54.132Z","updated_at":"2025-10-07T09:00:03.102Z","avatar_url":"https://github.com/ealush.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ealush"],"categories":["TypeScript","Projects by main language"],"sub_categories":["react"],"readme":"# Emoji Picker React (v4) | [Live Demo](https://ealush.com/emoji-picker-react)\n\n![Picker](https://user-images.githubusercontent.com/11255103/192167134-8205eb89-a71d-4463-8f3a-940e844917d5.gif)\n\n## Usage as a Reactions Picker\n\n![image](https://github.com/ealush/emoji-picker-react/assets/11255103/48901306-e7fd-49cd-8f1e-9b214083a61d)\n\n## ![reactions](https://github.com/ealush/emoji-picker-react/assets/11255103/c28cc954-dc1d-4d82-91a8-64a74cf1d598)\n\n_If you enjoy using emoji-picker-react\u003cbr/\u003e\nYou should also consider trying:\u003cbr/\u003e\n\u003cimg src=\"https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/vest.png\" height=\"16\"/\u003e [Vest validation framework](https://vestjs.dev).\u003cbr/\u003e_\n\n---\n\n## What to know before using\n\n- This package assumes it runs in the browser. I have taken many steps to prevent it from failing on the server, but still, it is recommended to only render the component on the client. See troubleshooting section for more information.\n\n## Installation\n\n```\nnpm install emoji-picker-react\n```\n\n## Usage\n\n```jsx\nimport EmojiPicker from 'emoji-picker-react';\n\nfunction App() {\n return (\n \u003cdiv\u003e\n \u003cEmojiPicker /\u003e\n \u003c/div\u003e\n );\n}\n```\n\n## Shout Outs\n\n| Component Design 🎨 |\n| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| \u003ca href=\"https://pavelbolo.com\" target=\"_blank\"\u003e![317751726_1277528579755086_5320360926126813336_n copy](https://user-images.githubusercontent.com/11255103/205937426-a570b4a1-7243-4d3e-a7e5-ea04b61d940a.png)\u003c/a\u003e |\n| \u003ca href=\"https://pavelbolo.com\" target=\"_blank\"\u003ePavel Bolo\u003c/a\u003e |\n\n## Features\n\n- Custom click handler\n- Custom Emojis Support\n- Dark mode\n- Customizable styles via css variables\n- Default skin tone selection\n- Skin tone change\n- Different emoji sets (Google, Apple, Facebook, Twitter)\n- Native Emoji support\n- Emoji Component To Render Emojis in your app\n- Reactions Picker\n\n# Props\n\nThe following props are accepted by the picker:\n\n| Prop | Type | Default | Description |\n| ---------------------- | ------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| open | boolean | `true` | Controls whether the picker is open or not. |\n| onEmojiClick | function | | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter. |\n| autoFocusSearch | boolean | `true` | Controls the auto focus of the search input. |\n| theme | string | `light` | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`. |\n| emojiStyle | string | `apple` | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`. |\n| defaultSkinTone | string | `neutral` | Controls the default skin tone. |\n| lazyLoadEmojis | boolean | `false` | Controls whether the emojis are loaded lazily or not. |\n| previewConfig | object | `{}` | Controls the preview of the emoji. See below for more information. |\n| searchPlaceholder | string | `Search` | Controls the placeholder of the search input. |\n| suggestedEmojisMode | string | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`. |\n| skinTonesDisabled | boolean | `false` | Controls whether the skin tones are disabled or not. |\n| searchDisabled | boolean | `false` | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component. |\n| skinTonePickerLocation | string | `SEARCH` | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`. |\n| emojiVersion | string | - | Allows displaying emojis up to a certain version for compatibility. |\n| className | string | - | Adds a class name to the root element of the picker. |\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 height as string. |\n| style | React.CSSProperties | `{}` | Adds inline style to the root element of the picker. |\n| getEmojiUrl | Function | - | Allows to customize the emoji url and provide your own image host. |\n| categories | Array | - | Allows full config over ordering, naming and display of categories. |\n| customEmojis | Array\u003c{names: string[], imgUrl: string, id: string}\u003e | - | Allows adding custom emojis to the picker. |\n| hiddenEmojis | string[] | - | Controls the emojis that are hidden from the picker. |\n| reactionsDefaultOpen | boolean | `false` | Controls whether the reactions picker is on the initial mount instead of the main picker component. |\n| reactions | string[] | - | Controls the reactions to display in the reactions picker. Takes unified emoji ids |\n| onReactionClick | Function | - | Callback function that is called when a reaction is clicked. The function receives the emoji object as a parameter. If not passed, onEmojiClicked is used. |\n| allowExpandReactions | boolean | `true` | Controls whether the reactions picker can be expanded to the main picker. |\n| onSkinToneChange | Function | - | Callback function that is called when a skin tone is changed. The function receives new picked skin tone as a parameter. |\n\n## Full details\n\n- `onEmojiClick`: `(emojiData: EmojiClickData, event: MouseEvent) =\u003e void` - Callback function when an emoji is clicked. The callback receives the event and the emoji data. The emoji data is comprised of the following properties:\n\n ```ts\n {\n activeSkinTone: SkinTones;\n unified: string;\n unifiedWithoutSkinTone: string;\n emoji: string; // the emoji character, for example: '😀'. Emoji ID in custom emojis\n isCustom: boolean; // whether the emoji is a custom emoji or not\n names: string[];\n imageUrl: string; // the url of the emoji image with the current emoji style applied\n getImageUrl: (emojiStyle: EmojiStyle) =\u003e string; // a function that receives an emoji style and returns the url of the emoji image with the provided style applied\n }\n ```\n\n- `theme`: `Theme` - The theme of the picker. Can be `light`, `dark` or auto. Default is `light`.\n The `Theme` enum can be imported from the package.\n\n ```ts\n import { Theme } from 'emoji-picker-react';\n ```\n\n- `emojiStyle`: `EmojiStyle` - The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. Default is `apple`.\n The `EmojiStyle` enum can be imported from the package.\n\n ```ts\n import { EmojiStyle } from 'emoji-picker-react';\n ```\n\n- `autoFocusSearch`: `boolean` - Whether to focus the search input on mount. Defaults to `true`.\n\n- `lazyLoadEmojis`: `boolean` - Whether to lazy load the emojis. Defaults to `false`.\n\n- `defaultSkinTone`: `SkinTones` - The default skin tone to use when an emoji is clicked. Defaults to `SkinTones.Neutral`. Possible skin tones are:\n\n - ✋ 'neutral'\n - ✋🏻 '1f3fb'\n - ✋🏼 '1f3fc'\n - ✋🏽 '1f3fd'\n - ✋🏾 '1f3fe'\n - ✋🏿 '1f3ff'\n\nThe skin tones typescript enum can be imported directly from the package:\n\n```ts\nimport { SkinTones } from 'emoji-picker-react';\n```\n\n- `onSkinToneChange`: `(skinTone: SkinTones) =\u003e void` - Callback function when a skin tone is changed.\n\n- `searchDisabled`: `boolean` - Whether to disable the search input. Defaults to `false`. When disabled, the skin tone picker will be shown in the preview component.\n\n- `skinTonesDisabled`: `boolean` - Whether to disable the skin tone selection. Defaults to `false`.\n\n- `skinTonePickerLocation`: `SkinTonePickerLocation` - The location of the skin tone picker. Can be either `SEARCH` or `PREVIEW`. Defaults to `SEARCH`. The `SkinTonePickerLocation` enum can be imported from the package.\n\n ```ts\n import { SkinTonePickerLocation } from 'emoji-picker-react';\n ```\n\n- `previewConfig`: `PreviewConfig` - Full control over the Preview component, either to show/hide it, change the default emoji or the default caption.\n\n```ts\n{\n defaultEmoji: string; // defaults to: \"1f60a\"\n defaultCaption: string; // defaults to: \"What's your mood?\"\n showPreview: boolean; // defaults to: true\n}\n```\n\n- `searchPlaceholder`: `string` - The placeholder text for the search input. Defaults to `Search`.\n\n- categories: Allows full config over ordering, naming and display of categories.\n To only sort/omit categories, you can simply pass an array of category names to display:\n\n - 'suggested',\n - 'custom', - Hidden by default\n - 'smileys_people',\n - 'animals_nature',\n - 'food_drink',\n - 'travel_places',\n - 'activities',\n - 'objects',\n - 'symbols',\n - 'flags'\n\n For a more in-depth configuration, you can pass an array with category config:\n\n ```ts\n [\n {\n category: 'suggested',\n name: 'Recently Used'\n },\n {\n category: 'smileys_people',\n name: 'Faces...'\n }\n ];\n ```\n\n- `suggestedEmojisMode`: `SuggestedEmojisMode` - The mode to use for the suggested emojis. Can be either `recent` or `frequent`. Defaults to `recent`.\n The `SuggestionMode` enum can be imported from the package.\n\n ```ts\n import { SuggestionMode } from 'emoji-picker-react';\n ```\n\n- `emojiVersion`: `string` - Allows displaying emojis up to a certain version for compatibility. The passed version will be parsed as a float and each emoji will be tested against it. Common values are:\n\n - `\"0.6\"`\n - `\"1.0\"`\n - `\"2.0\"`\n - `\"3.0\"`\n - `\"4.0\"`\n - `\"5.0\"`\n\n- `getEmojiUrl`: `(unified: string, emojiStyle: EmojiStyle) =\u003e string` - Allows to customize the emoji url and provide your own image host. The function receives the emoji unified and the emoji style as parameters. The function should return the url of the emoji image.\n\n## customEmojis - Custom Emojis\n\nThe customEmojis prop allows you to add custom emojis to the picker. The custom emojis prop takes an array of custom emojis, each custom emoji has three keys:\n\n- _id_: Unique identifier for each of the custom emojis\n- _names_: an array of string identifiers, will be used both for display, search and indexing.\n- _imgUrl_: URL for the emoji image\n\n## hiddenEmojis - Excluding certain emojis\n\nThe hiddenEmojis prop allows you to hide emojis from the picker. The hidden emojis prop takes an array of emoji unicode names to hide.\n\nFor example:\n\n```js\n['1f600', '1f601', '1f602']; // will remove: 😀, 😁, 😂\n```\n\n### Usage Example\n\n```jsx\n\u003cPicker\n customEmojis={[\n {\n names: ['Alice', 'alice in wonderland'],\n imgUrl:\n 'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/alice.png',\n id: 'alice'\n },\n {\n names: ['Dog'],\n imgUrl:\n 'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/dog.png',\n id: 'dog'\n },\n {\n names: ['Hat'],\n imgUrl:\n 'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/hat.png',\n id: 'hat'\n },\n {\n names: ['Vest'],\n imgUrl:\n 'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/vest.png',\n id: 'vest'\n }\n ]}\n/\u003e\n```\n\nHere are some additional things to keep in mind about custom emojis:\n\n- The custom emojis will be added to the Custom category.\n- The location or name of the Custom category can be controlled via the categories prop.\n- The custom emojis will be indexed by their id property. This means that you can search for custom emojis by their id or names.\n\n## Reactions Picker\n\n![image](https://github.com/ealush/emoji-picker-react/assets/11255103/48901306-e7fd-49cd-8f1e-9b214083a61d)\n\n![reactions](https://github.com/ealush/emoji-picker-react/assets/11255103/c28cc954-dc1d-4d82-91a8-64a74cf1d598)\n\nThe picker can be used as a reactions picker. To use it as a reactions picker, you should set the reactionsDefaultOpen prop to true. This will cause the picker to the reactions picker on the initial mount instead of the main picker component.\n\nTo customize the reactions, you should pass an array of unified emoji ids to the reactions prop.\n\nThe reactions picker uses the same event handlers, and the same css variables for customizations.\n\n```jsx\n\u003cPicker reactionsDefaultOpen={true} onReactionClick={handleReaction} /\u003e\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\u003cEmojiPicker height={500} width={400} /\u003e\n```\n\n```jsx\n\u003cEmojiPicker 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 `.EmojiPickerReact`, when overriding, make sure to provide a more specific selector.\n\nIn dark mode, the specific selector is `.EmojiPickerReact.epr-dark-theme`.\n\nThe list of possible variables is quite extensive, but the main ones you may want to override are:\n\n- `--epr-emoji-size`: The size of the emojis.\n- `--epr-emoji-gap`: The space between emojis.\n\n- `--epr-hover-bg-color` Hovered emoji background color.\n- `--epr-bg-color`: The background color of the picker. When changing it, you should also change `--epr-category-label-bg-color` as they are usually the same color.\n- `--epr-text-color`: The text color in the picker.\n\n# Rendering Output Emojis in Your App\n\nThe picker exports an `Emoji` component. The emoji component is the same used within the picker, so it will render the same way as the emojis in the picker. You can choose to render emojis either as native, or as images.\n\n## Props\n\n| Name | Type | Default | Description |\n| ------------- | ------------ | ------------------ | ------------------------------------------------------------------------------------------- |\n| `unified` | string | \"\" | The unified code of the emoji. |\n| `size` | number | 32 | The size of the emoji. |\n| `emojiStyle` | `EmojiStyle` | `EmojiStyle.APPLE` | The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. |\n| `lazyLoad` | boolean | `false` | Whether to lazy load the emoji. image |\n| `emojiUrl` | string | - | The url of the emoji image to render. Useful for custom emojis. |\n| `getEmojiUrl` | Function | - | Allows to customize the emoji url and provide your own image host for dynamic resolution. |\n\n```js\nimport { Emoji, EmojiStyle } from 'emoji-picker-react';\n\nexport function MyApp() {\n return (\n \u003cp\u003e\n My Favorite emoji is:\n \u003cEmoji unified=\"1f423\" size=\"25\" /\u003e\n \u003c/p\u003e\n );\n}\n```\n\n# How to Contribute?\n\nCheck out the [contributing documentation](https://github.com/ealush/emoji-picker-react/blob/master/CONTRIBUTING.md) to get information about contributing, reporting bugs, suggesting enhancements, and writing code changes to the project!\n\n# Troubleshooting\n\n## Error Boundary\n\nemoji-picker-react has a top-level error boundary, trying to catch rendering errors. It won't catch server side related errors, or event handlers errors. If an error is caught, the picker will not render, and a console error will be logged.\n\n## Next.js\n\nTo avoid errors such as \"document is not defined\" on the server side, you should make sure the library is only imported on the client side. Here is how to do that:\n\n```javascript\nimport dynamic from 'next/dynamic';\n\nconst Picker = dynamic(\n () =\u003e {\n return import('emoji-picker-react');\n },\n { ssr: false }\n);\n```\n\n## Vite\n\nFor reference, if you only need to shim global, you can add\n\n```html\n\u003cscript\u003e\n window.global = window;\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fealush%2Femoji-picker-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fealush%2Femoji-picker-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fealush%2Femoji-picker-react/lists"}