Heavy thanks to Missive team for Emoji-mart

Installation

npm install --save emoji-mart

Components

Picker

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

<Picker set='emojione' />
<Picker onSelect={this.addIcon} />
<Picker title='Pick your icon…' icon='hand-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 icon color | | icon | | department_store | The icon shown when no icons 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 icons | | recent | | | Pass your own frequently used icons as array of string IDs | | iconSize | | 24 | The icon width and height | | onClick | | | Params: (icon, style, color, event) => {}. Not called when icon is selected with enter | | onSelect | | | Params: (icon, style, color) => {} | | perLine | | 9 | Number of icons 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 icon | | backgroundImageFn | | ((set, sheetSize) => …) | A Fn that returns that image sheet to use for icons. Useful for avoiding a request if you have the sheet locally. | | iconsToShowFilter | | ((icon) => true) | A Fn to choose whether an icon 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. | | iconTooltip | | false | Show icons short name when hovering (title) | | style | | | Inline styles applied to the root element. Useful for positioning | | title | | Icon Mart™ | The title shown when no icons are hovered | | notFoundIcon | | sleuth_or_spy | The icon 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 Icon Found',
colortext: 'Choose your color',
categories: {
  search: 'Search Results',
  recent: 'Frequently Used',
  custom: 'Custom',
},

Tip: You usually do not need to translate the categories and skin tones by youself, because this data and their translations should be included in the Unicode CLDR (the "Common Locale Data Repository"). You can look them up and just take them from there.

Examples of emoji object:

{
  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://github.githubassets.com/images/icons/emoji/octocat.png'
}