Emoji Mart is a Slack-like customizable
emoji picker component for React
Demo • Changelog
picker

Missive | Team email, team chat, team tasks, one app

Brought to you by the Missive team

## Installation `npm install --save emoji-mart` ## Components ### Picker ```jsx import { Picker } from 'emoji-mart' ``` | Prop | Required | Default | Description | | ---- | :------: | ------- | ----------- | | **autoFocus** | | `false` | Auto focus the search input when mounted | | **color** | | `#ae65c5` | The top bar anchors select and hover color | | **emoji** | | `department_store` | The emoji shown when no emojis are hovered, set to an empty string to show nothing | | **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. | | **exclude** | | `[]` | Don't load excluded categories. Accepts [I18n categories keys](#i18n). | | **custom** | | `[]` | [Custom emojis](#custom-emojis) | | **recent** | | | Pass your own frequently used emojis as array of string IDs | | **emojiSize** | | `24` | The emoji width and height | | **onClick** | | | Params: `(emoji, event) => {}` | | **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`) | | **i18n** | | [`{…}`](#i18n) | [An object](#i18n) containing localized strings | | **native** | | `false` | Renders the native unicode emoji | | **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook'` | | **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` | | **backgroundImageFn** | | ```((set, sheetSize) => …)``` | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. | | **emojisToShowFilter** | | ```((emoji) => true)``` | A Fn to choose whether an emoji should be displayed or not | | **showPreview** | | `true` | Display preview section | | **emojiTooltip** | | `false` | Show emojis short name when hovering (title) | | **skin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` | | **style** | | | Inline styles applied to the root element. Useful for positioning | | **title** | | `Emoji Mart™` | The title shown when no emojis are hovered | #### I18n ```js search: 'Search', notfound: 'No Emoji Found', categories: { search: 'Search Results', recent: 'Frequently Used', people: 'Smileys & People', nature: 'Animals & Nature', foods: 'Food & Drink', activity: 'Activity', places: 'Travel & Places', objects: 'Objects', symbols: 'Symbols', flags: 'Flags', custom: 'Custom', } ``` #### Sheet sizes Sheets are served from [unpkg](https://unpkg.com), a global CDN that serves files published to [npm](https://www.npmjs.com). | Set | sheetSize | Size | | -------- | --------- | -------- | | apple | 16 | 938.7 kB | | apple | 20 | 1.3 MB | | apple | 32 | 2.6 MB | | apple | 64 | 7.2 MB | | emojione | 16 | 805.5 kB | | emojione | 20 | 1.1 MB | | emojione | 32 | 2.0 MB | | emojione | 64 | 2.7 MB | | google | 16 | 622.6 kB | | google | 20 | 849.8 kB | | google | 32 | 1.6 MB | | google | 64 | 3.6 MB | | twitter | 16 | 776.0 kB | | twitter | 20 | 1.0 MB | | twitter | 32 | 1.9 MB | | twitter | 64 | 4.2 MB | #### Examples of `emoji` object: ```js { id: 'smiley', name: 'Smiling Face with Open Mouth', colons: ':smiley:', text: ':)', emoticons: [ '=)', '=-)' ], skin: null, native: '😃' } { id: 'santa', name: 'Father Christmas', colons: ':santa::skin-tone-3:', text: '', emoticons: [], skin: 3, native: '🎅🏼' } { id: 'octocat', name: 'Octocat', colons: ':octocat', text: '', emoticons: [], custom: true, imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7' } ``` ### Emoji ```jsx import { Emoji } from 'emoji-mart' ``` | Prop | Required | Default | Description | | ---- | :------: | ------- | ----------- | | **emoji** | ✓ | | Either a string or an `emoji` object | | **size** | ✓ | | The emoji width and height. | | **native** | | `false` | Renders the native unicode emoji | | **onClick** | | | Params: `(emoji, event) => {}` | | **onLeave** | | | Params: `(emoji, event) => {}` | | **onOver** | | | Params: `(emoji, event) => {}` | | **set** | | `apple` | The emoji set: `'apple', 'google', 'twitter', 'emojione'` | | **sheetSize** | | `64` | The emoji [sheet size](#sheet-sizes): `16, 20, 32, 64` | | **backgroundImageFn** | | ```((set, sheetSize) => `https://unpkg.com/emoji-datasource@3.0.0/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. | | **skin** | | `1` | Skin color: `1, 2, 3, 4, 5, 6` | | **tooltip** | | `false` | Show emoji short name when hovering (title) | ## Custom emojis You can provide custom emojis which will show up in their own category. ```js import { Picker } from 'emoji-mart' const customEmojis = [ { name: 'Octocat', short_names: ['octocat'], text: '', emoticons: [], keywords: ['github'], imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7' }, ] ``` ## Headless search The `Picker` doesn’t have to be mounted for you to take advantage of the advanced search results. ```js import { emojiIndex } from 'emoji-mart' emojiIndex.search('christmas').map((o) => o.native) // => [🎄, 🎅🏼, 🔔, 🎁, ⛄️, ❄️] ``` ## Storage By default EmojiMart will store user chosen skin and frequently used emojis in `localStorage`. That can however be overwritten should you want to store these in your own storage. ```js import { store } from 'emoji-mart' store.setHandlers({ getter: (key) => { // Get from your own storage (sync) }, setter: (key, value) => { // Persist in your own storage (can be async) } }) ``` Possible keys are: | Key | Value | Description | | --- | ----- | ----------- | | skin | `1, 2, 3, 4, 5, 6` | | | frequently | `{ 'astonished': 11, '+1': 22 }` | An object where the key is the emoji name and the value is the usage count | | last | 'astonished' | (Optional) Used by `frequently` to be sure the latest clicked emoji will always appear in the “Recent” category | ## Features ### Powerful search #### Short name, name and keywords Not only does **Emoji Mart** return more results than most emoji picker, they’re more accurate and sorted by relevance. summer

#### Emoticons The only emoji picker that returns emojis when searching for emoticons.

#### Results intersection For better results, **Emoji Mart** split search into words and only returns results matching both terms. high-five

### Fully customizable #### Anchors color, title and default emoji customizable-color

#### Emojis sizes and length size-and-length

#### Default skin color As the developer, you have control over which skin color is used by default. skins

It can however be overwritten as per user preference. customizable-skin

#### Multiple sets supported Apple / Google / Twitter / EmojiOne / Messenger / Facebook sets

## Not opinionated **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. ## Development ```sh $ yarn build $ yarn start $ yarn storybook ``` ## 🎩 Hat tips! Powered by [iamcal/emoji-data](https://github.com/iamcal/emoji-data) and inspired by [iamcal/js-emoji](https://github.com/iamcal/js-emoji).
🙌🏼 [Cal Henderson](https://github.com/iamcal).

Missive mixes team email and threaded group chat for productive teams.
A single app for all your internal and external communication and a full work management solution.