{"id":15204321,"url":"https://github.com/figma/emoji-mart","last_synced_at":"2025-05-07T10:36:49.587Z","repository":{"id":234331012,"uuid":"101349372","full_name":"figma/emoji-mart","owner":"figma","description":"Fork of https://github.com/missive/emoji-mart","archived":false,"fork":false,"pushed_at":"2024-03-28T21:31:27.000Z","size":54262,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-17T01:22:15.104Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/figma.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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}},"created_at":"2017-08-25T00:37:14.000Z","updated_at":"2024-04-18T20:46:13.000Z","dependencies_parsed_at":"2024-04-18T22:50:13.370Z","dependency_job_id":null,"html_url":"https://github.com/figma/emoji-mart","commit_stats":null,"previous_names":["figma/emoji-mart"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figma%2Femoji-mart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figma%2Femoji-mart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figma%2Femoji-mart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/figma%2Femoji-mart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/figma","download_url":"https://codeload.github.com/figma/emoji-mart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237938103,"owners_count":19390555,"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":[],"created_at":"2024-09-28T05:41:37.355Z","updated_at":"2025-02-09T10:43:04.713Z","avatar_url":"https://github.com/figma.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cbr\u003e\u003cb\u003eEmoji Mart\u003c/b\u003e is a Slack-like customizable\u003cbr\u003eemoji picker component for React\n  \u003cbr\u003e\u003ca href=\"https://missive.github.io/emoji-mart\"\u003eDemo\u003c/a\u003e • \u003ca href=\"https://github.com/missive/emoji-mart/releases\"\u003eChangelog\u003c/a\u003e\n  \u003cbr\u003e\u003cimg src=\"https://cloud.githubusercontent.com/assets/436043/17186519/9e71e8fe-5403-11e6-9314-21365c56a601.png\"\u003e\n  \u003cbr\u003e\u003ca title=\"Team email, team chat, team tasks, one app\" href=\"https://missiveapp.com\"\u003e\u003cimg alt=\"Missive | Team email, team chat, team tasks, one app\" src=\"https://cloud.githubusercontent.com/assets/436043/17186909/17f9cede-5405-11e6-988a-a7c2380af396.png\"\u003e\u003c/a\u003e\n  \u003cbr\u003eBrought to you by the \u003ca title=\"Team email, team chat, team tasks, one app\" href=\"https://missiveapp.com\"\u003eMissive\u003c/a\u003e team\n\u003c/div\u003e\n\n## Figma\nTo be more specific, this is Figma's private forked copy of the emoji-mart repo. It is used by the figma/figma repo for emoji picking.\n\nTo update this code, make changes to the tip of the `figma-release-1` branch. Then run `npm run clean \u0026\u0026 npm run build`, commit the results, and push the branch to origin. This puts the javascript build artifact itself in our git repo at the tip of that branch. Then go to the web/ directory in figma/figma and update the pinned hash to whatever the resulting commit hash is and commit that; the yarn install process will then update the emojimart package to the build artifacts at that git hash.\n\nYou can do this with arbitrary hashes, but if you're not doing it at the tip of `figma-release-1`, you probably want to backport those changes. It is useful to have a history of all the changes we've made to the repo in one place, so continuing to use that branch is useful.\n\n\n## Components\n### Picker\n```jsx\nimport { Picker } from 'emoji-mart'\n\n\u003cPicker set='emojione' /\u003e\n\u003cPicker onClick={this.addEmoji} /\u003e\n\u003cPicker title='Pick your emoji…' emoji='point_up' /\u003e\n\u003cPicker style={{ position: 'absolute', bottom: '20px', right: '20px' }} /\u003e\n\u003cPicker i18n={{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }} /\u003e\n```\n\n| Prop | Required | Default | Description |\n| ---- | :------: | ------- | ----------- |\n| **autoFocus** | | `false` | Auto focus the search input when mounted |\n| **color** | | `#ae65c5` | The top bar anchors select and hover color |\n| **emoji** | | `department_store` | The emoji shown when no emojis are hovered, set to an empty string to show nothing |\n| **include** | | `[]` | Only load included categories. Accepts [I18n categories keys](#i18n). Order will be respected, except for the `recent` category which will always be the first. |\n| **exclude** | | `[]` | Don't load excluded categories. Accepts [I18n categories keys](#i18n). |\n| **custom** | | `[]` | [Custom emojis](#custom-emojis) |\n| **emojiSize** | | `24` | The emoji width and height |\n| **onClick** | | | Params: `(emoji, event) =\u003e {}` |\n| **perLine** | | `9` | Number of emojis per line. While there’s no minimum or maximum, this will affect the picker’s width. This will set *Frequently Used* length as well (`perLine * 4`) |\n| **i18n** | | [`{…}`](#i18n) | [An object](#i18n) containing localized strings |\n| **native** | | `false` | Renders the native unicode emoji |\n| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook'` |\n| **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |\n| **backgroundImageFn** | | ```((set, sheetSize) =\u003e …)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |\n| **emojisToShowFilter** | | ```((emoji) =\u003e true)``` | A Fn to choose whether an emoji should be displayed or not |\n| **skin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |\n| **style** | | | Inline styles applied to the root element. Useful for positioning |\n| **title** | | `Emoji Mart™` | The title shown when no emojis are hovered |\n\n#### I18n\n```js\nsearch: 'Search',\nnotfound: 'No Emoji Found',\ncategories: {\n  search: 'Search Results',\n  recent: 'Frequently Used',\n  people: 'Smileys \u0026 People',\n  nature: 'Animals \u0026 Nature',\n  foods: 'Food \u0026 Drink',\n  activity: 'Activity',\n  places: 'Travel \u0026 Places',\n  objects: 'Objects',\n  symbols: 'Symbols',\n  flags: 'Flags',\n  custom: 'Custom',\n}\n```\n\n#### Sheet sizes\nSheets are served from [unpkg](https://unpkg.com), a global CDN that serves files published to [npm](https://www.npmjs.com).\n\n| Set      | sheetSize | Size     |\n| -------- | --------- | -------- |\n| apple    | 16        | 938.7 kB |\n| apple    | 20        | 1.3 MB   |\n| apple    | 32        | 2.6 MB   |\n| apple    | 64        | 7.2 MB   |\n| emojione | 16        | 805.5 kB |\n| emojione | 20        | 1.1 MB   |\n| emojione | 32        | 2.0 MB   |\n| emojione | 64        | 2.7 MB   |\n| google   | 16        | 622.6 kB |\n| google   | 20        | 849.8 kB |\n| google   | 32        | 1.6 MB   |\n| google   | 64        | 3.6 MB   |\n| twitter  | 16        | 776.0 kB |\n| twitter  | 20        | 1.0 MB   |\n| twitter  | 32        | 1.9 MB   |\n| twitter  | 64        | 4.2 MB   |\n\n#### Examples of `emoji` object:\n```js\n{\n  id: 'smiley',\n  name: 'Smiling Face with Open Mouth',\n  colons: ':smiley:',\n  text: ':)',\n  emoticons: [\n    '=)',\n    '=-)'\n  ],\n  skin: null,\n  native: '😃'\n}\n\n{\n  id: 'santa',\n  name: 'Father Christmas',\n  colons: ':santa::skin-tone-3:',\n  text: '',\n  emoticons: [],\n  skin: 3,\n  native: '🎅🏼'\n}\n\n{\n  id: 'octocat',\n  name: 'Octocat',\n  colons: ':octocat',\n  text: '',\n  emoticons: [],\n  custom: true,\n  imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'\n}\n\n```\n\n### Emoji\n```jsx\nimport { Emoji } from 'emoji-mart'\n\n\u003cEmoji emoji={{ id: 'santa', skin: 3 }} /\u003e\n\u003cEmoji emoji=':santa::skin-tone-3:' /\u003e\n\u003cEmoji emoji='santa' set='emojione' /\u003e\n```\n\n| Prop | Required | Default | Description |\n| ---- | :------: | ------- | ----------- |\n| **emoji** | ✓ | | Either a string or an `emoji` object |\n| **size** | ✓ | | The emoji width and height. |\n| **native** | | `false` | Renders the native unicode emoji |\n| **onClick** | | | Params: `(emoji, event) =\u003e {}` |\n| **onLeave** | | | Params: `(emoji, event) =\u003e {}` |\n| **onOver** | | | Params: `(emoji, event) =\u003e {}` |\n| **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` |\n| **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` |\n| **backgroundImageFn** | | ```((set, sheetSize) =\u003e `https://unpkg.com/emoji-datasource@2.4.4/sheet_${set}_${sheetSize}.png`)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. |\n| **skin** | | `1` | Skin color: `1, 2, 3, 4, 5, 6` |\n\n## Custom emojis\nYou can provide custom emojis which will show up in their own category.\n\n```js\nimport { Picker } from 'emoji-mart'\n\nconst customEmojis = [\n  {\n    name: 'Octocat',\n    short_names: ['octocat'],\n    text: '',\n    emoticons: [],\n    keywords: ['github'],\n    imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'\n  },\n]\n\n\u003cPicker custom={customEmojis} /\u003e\n```\n\n## Headless search\nThe `Picker` doesn’t have to be mounted for you to take advantage of the advanced search results.\n\n```js\nimport { emojiIndex } from 'emoji-mart'\n\nemojiIndex.search('christmas').map((o) =\u003e o.native)\n// =\u003e [🎄, 🎅🏼, 🔔, 🎁, ⛄️, ❄️]\n```\n\n## Features\n### Powerful search\n#### Short name, name and keywords\nNot only does **Emoji Mart** return more results than most emoji picker, they’re more accurate and sorted by relevance.\n\n![sun-results](https://cloud.githubusercontent.com/assets/436043/17188668/25d21028-540c-11e6-93e7-9decd6130f08.png)\n\n#### Emoticons\nThe only emoji picker that returns emojis when searching for emoticons.\n\n![emoticon-results](https://cloud.githubusercontent.com/assets/436043/17188671/28ce7000-540c-11e6-9492-99f037480eb6.png)\n\n#### Results intersection\nFor better results, **Emoji Mart** split search into words and only returns results matching both terms.\n\n![highfive-results](https://cloud.githubusercontent.com/assets/436043/17188674/2c47d014-540c-11e6-925b-dfbdea517a65.png)\n\n### Fully customizable\n#### Anchors color, title and default emoji\n![anchors](https://cloud.githubusercontent.com/assets/436043/17187575/d245c796-5407-11e6-8b90-6f988b058b9b.png)\u003cbr\u003e\n![pick](https://cloud.githubusercontent.com/assets/436043/17187576/d2537bac-5407-11e6-9a05-ba20cd0f374d.png)\n\n#### Emojis sizes and length\n![sizes](https://cloud.githubusercontent.com/assets/436043/17189912/bff094fe-5411-11e6-95d0-2030f238b24f.png)\n\n#### Default skin color\nAs the developer, you have control over which skin color is used by default.\n\n![skins](https://cloud.githubusercontent.com/assets/436043/17221380/aa029d30-54c1-11e6-867c-772847aa5b7b.png)\n\nIt can however be overwritten as per user preference.\n\n![colors](https://cloud.githubusercontent.com/assets/436043/17221637/9f6f8508-54c2-11e6-8d10-59c5d3a458e0.png)\n\n#### Multiple sets supported\nApple / Google / Twitter / EmojiOne / Messenger / Facebook\n\n![sets](https://cloud.githubusercontent.com/assets/436043/26523496/d41cd734-42e6-11e7-8ae8-bad87e83d534.png)\n\n## Not opinionated\n**Emoji Mart** doesn’t automatically insert anything into a text input, nor does it show or hide itself. It simply returns an `emoji` object. It’s up to the developer to mount/unmount (it’s fast!) and position the picker. You can use the returned object as props for the `EmojiMart.Emoji` component. You could also use `emoji.colons` to insert text into a textarea or `emoji.native` to use the emoji.\n\n## Development\n```sh\n$ yarn run build:data\n$ yarn start\n$ open example/index.html\n```\n\n## 🎩 Hat tips!\nPowered by [iamcal/emoji-data](https://github.com/iamcal/emoji-data) and inspired by [iamcal/js-emoji](https://github.com/iamcal/js-emoji).\u003cbr\u003e\n🙌🏼  [Cal Henderson](https://github.com/iamcal).\n\n\u003cbr\u003e\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca title=\"Team email, team chat, team tasks, one app\" href=\"https://missiveapp.com\"\u003e\u003cimg alt=\"Missive | Team email, team chat, team tasks, one app\" src=\"https://cloud.githubusercontent.com/assets/436043/17222476/7fb2ef62-54c6-11e6-81a9-6b9d7323d19c.png\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\u003ca title=\"Team email, team chat, team tasks, one app\" href=\"https://missiveapp.com\"\u003eMissive\u003c/a\u003e mixes team email and threaded group chat for productive teams.\n  \u003cbr\u003eA single app for all your internal and external communication and a full work management solution.\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffigma%2Femoji-mart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffigma%2Femoji-mart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffigma%2Femoji-mart/lists"}