Twigs Logo

Emoji

Add emoji selector dropdown to the editor that opens when typing colon. Filter and select from a comprehensive list of emojis with customizable results.

Description

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.

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
    }))
  }}
/>