Consistent Emoji display across all platforms, independent of the host system.
The beautiful Emoji art used in this plugin is provided by the Joy Pixels 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: https://www.joypixels.com/licensing.
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.
If useNativeArt parameter is used, emoji unicode characters are displayed. This enables displaying platform specific art for emojis.
To use simply type : which will show an autocomplete with matching emojis.
npm install @draft-js-plugins/editornpm install @draft-js-plugins/emoji// It is important to import the Editor which accepts plugins.
import Editor from '@draft-js-plugins/editor';
import createEmojiPlugin from '@draft-js-plugins/emoji';
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;
The plugin ships with a default styling available at this location in the installed package: node_modules/@draft-js-plugins/emoji/lib/plugin.css
npm i style-loader css-loader --save-devmodule.exports = {
module: {
loaders: [
{
test: /plugin\.css$/,
loaders: ['style-loader', 'css'],
},
],
},
};
import '@draft-js-plugins/emoji/lib/plugin.css';.emojiSelectPopoverToneSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
}priorityList: {
':see_no_evil:': ["1f648"],
':raised_hands:': ["1f64c"],
':100:': ["1f4af"],
}selectGroups: [{
title: 'Society',
icon: '👥',
categories: ['people', 'food', 'travel'],
}, {
title: 'Objects & symbols',
icon: '❤️',
categories: ['objects', 'symbols'],
}]true, uses host system art for emojis instead of JoyPixels art. Default value is false.useNativeArt is ignored. You can use this component to implement your own emoji library. It receives the following props: emoji, unicode and themeuseNativeArt is ignored. You can use this component to implement your own emoji library. It receives the following props: decoratedText, className, children and themeimport React, { Component } from 'react';
import Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';
import createEmojiPlugin from '@draft-js-plugins/emoji';
import editorStyles from './editorStyles.module.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>
);
}
}
.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;
}
import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from '@draft-js-plugins/editor';
import createEmojiPlugin from '@draft-js-plugins/emoji';
import editorStyles from './editorStyles.module.css';
const emojiPlugin = createEmojiPlugin({
useNativeArt: true,
});
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 CustomEmojiEditor 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 closeOnEmojiSelect />
</div>
</div>
);
}
}