Emoji Mart is a Slack-like customizable
emoji picker component for React
DemoChangelog

Build Status

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 'emoji-mart/css/emoji-mart.css' 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 | | **enableFrequentEmojiSort** | | `false` | Instantly sort “Frequently Used” category | | **emojiSize** | | `24` | The emoji width and height | | **onClick** | | | Params: `(emoji, event) => {}`. Not called when emoji is selected with `enter` | | **onSelect** | | | Params: `(emoji) => {}` | | **onSkinChange** | | | Params: `(skin) => {}` | | **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', 'facebook'` | | **theme** | | `light` | The picker theme: `'auto', 'light', 'dark'` | | **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 | | **showSkinTones** | | `true` | Display skin tones picker. Disable both this and `showPreview` to remove the footer entirely. | | **emojiTooltip** | | `false` | Show emojis short name when hovering (title) | | **useButton** | | `true` | When clickable, render emojis with a `