Skip to main content

Emoji

Emoji plugin can be used to add emoji selector dropdown to the editor. The dropdown will be opened when the user types :. The dropdown will filter and show the emojis that contain the letters that the user typed.

By default all emojis in this list are available. You can customize the list of emojis by using a custom getResults function.

Result
Loading...
Live EditorOpen in playground
<Editor nodes={[EmojiNode]}>
  <EditorToolbar />
  <RichEditor placeholder="Type : to trigger emoji dropdown" />
  <EmojiPlugin />
</Editor>

Custom Results​

You can use custom results by passing a getResults function to the Emoji plugin. The getResults function should return a list of emojis that match the search query.

<EmojiPlugin
  getResults={(text, defaultEmojis) => {
    const data = someFunctionToGetEmojis(text);

    return data.map(item => ({
      label: item.label, // Will be shown in the dropdown list
      value: item.value, // Will be inserted in the editor
    }))
  }}
/>