{"id":16888647,"url":"https://github.com/brianhung/emojipicker","last_synced_at":"2025-07-23T23:40:59.584Z","repository":{"id":48137662,"uuid":"287630663","full_name":"BrianHung/EmojiPicker","owner":"BrianHung","description":"👋 twitter emoji picker written in react","archived":false,"fork":false,"pushed_at":"2021-12-11T10:56:14.000Z","size":3306,"stargazers_count":43,"open_issues_count":1,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-13T10:38:13.814Z","etag":null,"topics":["emoji-picker","react","twemoji"],"latest_commit_sha":null,"homepage":"https://brianhung.github.io/EmojiPicker","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BrianHung.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-14T21:51:49.000Z","updated_at":"2025-02-20T09:39:57.000Z","dependencies_parsed_at":"2022-08-12T19:31:27.402Z","dependency_job_id":null,"html_url":"https://github.com/BrianHung/EmojiPicker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianHung%2FEmojiPicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianHung%2FEmojiPicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianHung%2FEmojiPicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrianHung%2FEmojiPicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BrianHung","download_url":"https://codeload.github.com/BrianHung/EmojiPicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244931455,"owners_count":20534007,"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":["emoji-picker","react","twemoji"],"created_at":"2024-10-13T16:52:58.588Z","updated_at":"2025-03-22T08:31:00.270Z","avatar_url":"https://github.com/BrianHung.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr\u003e\u003cb\u003eReact Twemoji Picker\u003c/b\u003e is an emoji component\n  \u003cbr\u003emade for fast show-and-scroll and filtering\n  \u003cbr\u003e\u003ca href=\"https://brianhung.github.io/EmojiPicker\"\u003edemo\u003c/a\u003e\n  \u003cbr\u003e\u003ca href=\"https://brianhung.github.io/EmojiPicker\"\u003e\u003cimg width=\"343px\" src=\"./light-theme.png\" alt=\"image of emoji picker\" title=\"click to navigate to demo\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\u003ca href=\"https://brianhung.github.io/EmojiPicker\"\u003e\u003cimg width=\"343px\" src=\"./dark-theme.png\" alt=\"image of emoji picker\" title=\"click to navigate to demo\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\nTo do this, we virtualize emoji elements with [`react-window`](https://github.com/bvaughn/react-window) \nand [`react-window-infinite-loader`](), meaning elements are not rendered into the DOM until they \nare visible through the scroll viewport. This allows [`react-twemoji-picker`](https://github.com/BrianHung/EmojiPicker) to be used with input or contenteditable components which require fast responsivity.\n\nOriginal svg sources for emoji spritesheet comes from Twitter's [`twemoji`](https://github.com/twitter/twemoji) library. 😊\n\n## Installation\n\n```bash\nnpm install --save github:brianhung/emojipicker\n```\n\n## Usage\n\n```js\nimport { EmojiPicker } from 'react-twemoji-picker';\nimport EmojiData from \"react-twemoji-picker/data/twemoji.json\";\nimport \"react-twemoji-picker/dist/EmojiPicker.css\"\n\nconst emojiData = Object.freeze(EmojiData);\nconst handleEmojiSelect = (emoji: EmojiObject) =\u003e console.log(emoji);\n\n\u003cEmojiPicker emojiData={emojiData} handleEmojiSelect={handleEmojiSelect}/\u003e\n```\n\nIf you want to programatically get or set internal state (e.g. `search`), you have to use `EmojiPickertRef` \nsince `EmojiPicker` is a functional component. As an example,\n\n```jsx\nimport { EmojiPicker, EmojiPickerRef } from 'react-twemoji-picker';\nconst ref = React.createRef\u003cEmojiPickerRef\u003e()\nconst handleSearch = (query: string) =\u003e ref.current.search(query);\n\u003cEmojiPicker emojiData={emojiData} handleEmojiSelect={handleEmojiSelect} ref={ref}/\u003e\n\u003cinput onChange={event =\u003e handleSearch(event.target.value)} placeholder=\"search\"\u003e\u003c/input\u003e\n```\n\nTo see an example, look at the \u003ca href=\"./website/index.tsx\"\u003esource code\u003c/a\u003e for the demo.\n\n### Props\n\n| prop | default | description |\n|:-----|:--------|:------------|\n| emojiData: Record\u003cstring, EmojiObject[]\u003e | `{}` | map of categories to list of emoji objects |\n| emojiSize?: number | `36` | pixel size of an emoji |\n| numberScrollRows?: number | `12` | number of rows in the scroll element |\n| onEmojiSelect?: (emoji: EmojiObject, event: KeyboardEvent | MouseEvent) =\u003e void, | `(emoji: EmojiObject) =\u003e console.log(emoji)` | handle emoji click or enter key here |\n| showNavbar?: boolean; | `false` | allows navigation to categories |\n| showFooter?: boolean; | `false` | show focused emoji and its name |\n| showScroll?: boolean; | `true` | turn off if query is always not null |\n| emojisPerRow?: number; | `9` | number of emojis to show per row |\n| onKeyDownScroll?: Function; | `(event) =\u003e null` | handle additional key events like 'ctrl-c' here |\n| collapseCategoriesOnSearch?: boolean; | `true` | merge categories into single 'search results' category |\n| collapseHeightOnSearch?: boolean; | `true` | scroll height changes with number of emojis |\n| theme?: \"system\", \"light\", \"dark\" | `\"system\"` | css theme |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianhung%2Femojipicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrianhung%2Femojipicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrianhung%2Femojipicker/lists"}