The documentation currently represents the 2.0.0-rc2 release.
For troubleshooting please checkout theFAQ

Emoji

Consistent Emoji display across all platforms, independent of the host system.

Attribution to EmojiOne

The beautiful Emoji art used in this plugin is provided by the Emoji One project. Personal or non-commercial use of the emojis do not require attribution. For the rights to use our emojis still for free in commercial projects proper attribution in form of a link is required. More here: http://emojione.com/licensing.

Implementation

Emoji unicode characters are wrapped in a span, hidden, and displayed instead through a background image. This creates consistency across all platforms while maintaining natural copy/pasting functionality.

Usage

To use simply type : which will show an autocomplete with matching emojis.

Supported Environment

  • Desktop: Yes
  • Mobile: Yes
  • Screen-reader: Yes

Getting Started

npm install [email protected] --save
npm install [email protected] --save
gettingStarted.js
// It is important to import the Editor which accepts plugins.
import Editor from 'draft-js-plugins-editor'; // eslint-disable-line import/no-unresolved
import createEmojiPlugin from 'draft-js-emoji-plugin'; // eslint-disable-line import/no-unresolved
import React from 'react';

// Creates an Instance. At this step, a configuration object can be passed in
// as an argument.
const emojiPlugin = createEmojiPlugin();
const { EmojiSuggestions, EmojiSelect } = emojiPlugin;

// The Editor accepts an array of plugins. In this case, only the emojiPlugin is
// passed in, although it is possible to pass in multiple plugins.
// The EmojiSuggestions component is internally connected to the editor and will
// be updated & positioned once the user starts the autocompletion with a colon.
// The EmojiSelect component also is internally connected to the editor. He add
// a button which allows open emoji select popup.
const MyEditor = ({ editorState, onChange }) => (
  <div>
    <Editor
      editorState={editorState}
      onChange={onChange}
      plugins={[emojiPlugin]}
    />
    <EmojiSuggestions />
    <EmojiSelect />
  </div>
);

export default MyEditor;

Importing the default styles

The plugin ships with a default styling available at this location in the installed package:  node_modules/draft-js-emoji-plugin/lib/plugin.css

Webpack Usage

  • 1. Install Webpack loaders:  npm i style-loader css-loader --save-dev
  • 2. Add the below section to Webpack config (if your config already has a loaders array, simply add the below loader object to your existing list.
    module.exports = {
      module: {
        loaders: [
          {
            test: /plugin\.css$/,
            loaders: [
              'style', 'css',
            ],
          },
        ],
      },
    };
    
  • 3. Add the below import line to your component to tell Webpack to inject the style to your component.
    import 'draft-js-emoji-plugin/lib/plugin.css'; // eslint-disable-line import/no-unresolved
    
  • 4. Restart Webpack.

Browserify Usage

Please help, by submiting a Pull Request to the documentation.

Configuration Parameters

themeObject of CSS classes with the following keys.
emoji:CSS class for the emoji wrapper.
emojiSuggestions:CSS class for suggestions component.
emojiSuggestionsEntry:CSS class for an entry in the suggestions component.
emojiSuggestionsEntryFocused:CSS class for the focused entry in the suggestions component.
emojiSuggestionsEntryText:CSS class for an entry’s text in the suggestions component.
emojiSuggestionsEntryIcon:CSS class for an entry’s emoji image in the suggestions component.
emojiSelect:CSS class for emoji select component.
emojiSelectButton:CSS class for button to open emoji select popup.
emojiSelectButtonPressed:CSS class for pressed state of button to open emoji select popup.
emojiSelectPopover:CSS class for emoji select popup.
emojiSelectPopoverClosed:CSS class for closed state of the emoji select popup.
emojiSelectPopoverTitle:CSS class for a title of active group in the emoji select popup.
emojiSelectPopoverGroups:CSS class for the emoji groups wrapper in the emoji select popup.
emojiSelectPopoverGroup:CSS class for a group of emojis in the emoji select popup.
emojiSelectPopoverGroupTitle:CSS class for a title of emoji group in the emoji select popup.
emojiSelectPopoverGroupList:CSS class for a group emoji list in the emoji select popup.
emojiSelectPopoverGroupItem:CSS class for a group emoji list item in the emoji select popup.
emojiSelectPopoverToneSelect:CSS class for tone select in the emoji select popup.
Important. The tone select must overlap the emoji select popup so that disable controls of the popup. By default
.emojiSelectPopoverToneSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}
emojiSelectPopoverToneSelectList:CSS class for a tone select emoji list in the emoji select popup.
emojiSelectPopoverToneSelectItem:CSS class for a tone select emoji list item in the emoji select popup.
emojiSelectPopoverEntry:CSS class for an emoji entry in the emoji select popup (including tone select).
emojiSelectPopoverEntryFocused:CSS class for the focused emoji entry in the emoji select popup (including tone select).
emojiSelectPopoverEntryIcon:CSS class for an emoji entry’s image in the emoji select popup (including tone select).
emojiSelectPopoverNav:CSS class for a group navigation in the emoji select popup.
emojiSelectPopoverNavItem:CSS class for a group navigation item in the emoji select popup.
emojiSelectPopoverNavEntry:CSS class for an entry of the group navigation in the emoji select popup.
emojiSelectPopoverNavEntryActive:CSS class for active state of the group navigation entry in the emoji select popup.
emojiSelectPopoverScrollbar:CSS class for scrollbar in the emoji select popup.
emojiSelectPopoverScrollbarThumb:CSS class for scrollbar thumb in the emoji select popup.
imagePathThe Emojis are displayed using SVGs. The full path is constructed of multiple parts like this: `${imagePath}${unicode}.${imageType}${cacheBustParam}`. The default imagePath is: '//cdn.jsdelivr.net/emojione/assets/svg/', but can be overwritten with this config.
imageTypeThe default imageType is: 'svg', but can be overwritten with this config.
allowImageCacheBy default ${cacheBustParam} is being changed with the new version. If you want to skip the cache busting, you can use this property. The default value of allowImageCache is: false
positionSuggestionsThe function can be used to manipulate the position of the popover containing the suggestions. It receives one object as arguments containing the visible rectangle surrounding the decorated search string including the colon. In addition the object contains prevProps, prevState, state & props. An object should be returned which can contain all sorts of styles. The defined properties will be applied as inline-styles.
priorityList
These entries will be show first in the EmojiSuggestions dropdown after typing `:`. Must be an object which must contain Emoji entries used by EmojiOne e.g.
priorityList: {
  ':see_no_evil:': ["1f648"],
  ':raised_hands:': ["1f64c"],
  ':100:': ["1f4af"],
}
selectGroups
Emoji select groups specification. Must be an array of objects, which declare each group: title, icon (can be a string or React element), array of emoji categories from EmojiOne e.g.
selectGroups: [{
  title: 'Society',
  icon: '👥',
  categories: ['people', 'food', 'travel'],
}, {
  title: 'Objects & symbols',
  icon: '❤️',
  categories: ['objects', 'symbols'],
}]
selectButtonContentContent of button which opens emoji select popup. (Default content is ☺)
toneSelectOpenDelayTime delay before opening tone select. (Default value is 500 ms)

EmojiSuggestions

The EmojiSuggestions component is part of the plugin and should placed somewhere in the JSX after the Editor. It takes the following props:
onSearchChangeA callback which is triggered whenever the search term changes. The first argument is an object which constains the search term in the property value.
onOpenA callback which is triggered whenever the suggestions popover opens.
onCloseA callback which is triggered whenever the suggestions popover closes.

Simple Emoji Example

People

People

Nature

Food & Drink

Activity

Travel & Places

Objects

Symbols

Flags

SimpleEmojiEditor.js
import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor'; // eslint-disable-line import/no-unresolved
import createEmojiPlugin from 'draft-js-emoji-plugin'; // eslint-disable-line import/no-unresolved
import editorStyles from './editorStyles.css';

const emojiPlugin = createEmojiPlugin();
const { EmojiSuggestions, EmojiSelect } = emojiPlugin;
const plugins = [emojiPlugin];
const text = `Cool, we can have all sorts of Emojis here. 🙌
🌿☃️🎉🙈 aaaand maybe a few more here 🐲☀️🗻 Quite fun!`;

export default class SimpleEmojiEditor extends Component {

  state = {
    editorState: createEditorStateWithText(text),
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  focus = () => {
    this.editor.focus();
  };

  render() {
    return (
      <div>
        <div className={editorStyles.editor} onClick={this.focus}>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={plugins}
            ref={(element) => { this.editor = element; }}
          />
          <EmojiSuggestions />
        </div>
        <div className={editorStyles.options}>
          <EmojiSelect />
        </div>
      </div>
    );
  }
}
editorStyles.js
.editor {
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: text;
  padding: 16px;
  border-radius: 2px;
  margin-bottom: 2em;
  box-shadow: inset 0px 1px 8px -3px #ABABAB;
  background: #fefefe;
}

.editor :global(.public-DraftEditor-content) {
  min-height: 140px;
}

.options {
  margin-bottom: 20px;
}