Emojis

Mentions are powerful enough that you can build much more with them. An emoji picker is just a mention where the display text does not match the query. We'll use : as the indicator: the user types :smile, picks from a list, and the shortcode is replaced with the emoji itself. If the mention events are new to you, start with Mentions and the User and channel mentions guide; this page reuses the same flow.

A shortcode table

Map each shortcode to the glyph it inserts:

const EMOJIS = [
  { shortcode: 'smile', char: '😄' },
  { shortcode: 'heart', char: '❤️' },
  { shortcode: 'fire', char: '🔥' },
  { shortcode: 'rocket', char: '🚀' },
];

Wiring it up

Register : as the only indicator and filter the table with the text typed after it. Because people habitually close the shortcode (:smile:), strip a trailing colon before matching:

<EnrichedTextInput
  mentionIndicators={[':']}
  onStartMention={() => setOpen(true)}
  onChangeMention={({ text }) => setQuery(text)}
  onEndMention={() => setOpen(false)}
  // ...
/>;

const q = query.replace(/:$/, '').toLowerCase();
const suggestions = EMOJIS.filter(e => e.shortcode.startsWith(q));

When the user picks, setMention inserts the glyph as the mention's display text. The data-shortcode makes a handy attribute if you ever need to reconstruct it:

const pick = (emoji) => {
  ref.current?.setMention(':', emoji.char, {
    'data-shortcode': emoji.shortcode,
  });
};

Since the emoji glyph is the whole mention, drop the usual highlight so it reads as plain text:

const htmlStyle = {
  mention: {
    ':': {
      color: '#232736',
      backgroundColor: 'transparent',
      textDecorationLine: 'none',
    },
  },
};

Try it out

Type : followed by a name - :fire, :heart - then tap a suggestion. The shortcode is replaced with a single emoji that you can place anywhere in the text.

Loading…