Customizable Slack-like emoji picker for React

Customizable Slack-like emoji picker for React

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


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

import 'emoji-mart/css/emoji-mart.css'
import { Picker } from 'emoji-mart'

<Picker set='emojione' />
<Picker onSelect={this.addEmoji} />
<Picker title='Pick your emoji…' emoji='point_up' />
<Picker style={{ position: 'absolute', bottom: '20px', right: '20px' }} />
<Picker i18n={{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }} />
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. 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.
custom [] 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) => {}. 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 {…} An object 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: 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
emojiTooltip false Show emojis short name when hovering (title)
skin Forces skin color: 1, 2, 3, 4, 5, 6
defaultSkin 1 Default skin color: 1, 2, 3, 4, 5, 6
skinEmoji The emoji used to pick a skin tone. Uses an emoji-less skin tone picker by default
style Inline styles applied to the root element. Useful for positioning
title Emoji Mart™ The title shown when no emojis are hovered
notFoundEmoji sleuth_or_spy The emoji shown when there are no search results
notFound Not Found
icons {} Custom icons

I18n

search: 'Search',
clear: 'Clear', // Accessible label on "clear" button
notfound: 'No Emoji Found',
skintext: 'Choose your default skin tone',
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',
},
categorieslabel: 'Emoji categories', // Accessible title for the list of categories
skintones: {
  1: 'Default Skin Tone',
  2: 'Light Skin Tone',
  3: 'Medium-Light Skin Tone',
  4: 'Medium Skin Tone',
  5: 'Medium-Dark Skin Tone',
  6: 'Dark Skin Tone',
},

Sheet sizes

Sheets are served from unpkg, a global CDN that serves files published to npm.

Set Size (sheetSize: 16) Size (sheetSize: 20) Size (sheetSize: 32) Size (sheetSize: 64)
apple 334 KB 459 KB 1.08 MB 2.94 MB
emojione 315 KB 435 KB 1020 KB 2.33 MB
facebook 322 KB 439 KB 1020 KB 2.50 MB
google 301 KB 409 KB 907 KB 2.17 MB
messenger 325 KB 449 KB 1.05 MB 2.69 MB
twitter 288 KB 389 KB 839 KB 1.82 MB

Datasets

While all sets are available by default, you may want to include only a single set data to reduce the size of your bundle.

Set Size (on disk)
all 570 KB
apple 484 KB
emojione 485 KB
facebook 421 KB
google 483 KB
messenger 197 KB
twitter 484 KB

To use these data files (or any other custom data), use the NimblePicker component:

import data from 'emoji-mart/data/messenger.json'
import { NimblePicker } from 'emoji-mart'

<NimblePicker set='messenger' data={data} />

Examples of emoji object:

{
  id: 'smiley',
  name: 'Smiling Face with Open Mouth',
  colons: ':smiley:',
  text: ':)',
  emoticons: [
    '=)',
    '=-)'
  ],
  skin: null,
  native: '

Github Repository

Tags: #React #Emoji