Extra Aliases

Usage

Map additional shortcodes to existing emoji IDs via extraAliases. Values can reference built-in emoji IDs, built-in shortcodes, or custom emoji IDs.

@emoji-mart/data

import emojiMartData from '@emoji-mart/data';
import { fromEmojiMart } from 'react-emoji-text/adapters/emoji-mart';

const data = fromEmojiMart(emojiMartData);

<EmojiProvider data={data}>
  <EmojiText extraAliases={{ hi: 'wave', love: 'heart' }}>:hi: :love:</EmojiText>
</EmojiProvider>

emojibase

import emojis from 'emojibase-data/en/data.json';
import shortcodes from 'emojibase-data/en/shortcodes/emojibase.json';
import { fromEmojibase } from 'react-emoji-text/adapters/emojibase';

const data = fromEmojibase(emojis, { shortcodes });

<EmojiProvider data={data}>
  <EmojiText extraAliases={{ hi: 'wave', love: 'heart' }}>:hi: :love:</EmojiText>
</EmojiProvider>

Try It

Add, remove, and edit alias mappings to see them resolve in real time:

@emoji-mart/dataemojibase

Alias mappings

→Remove

→Remove

+ Add alias

👋 ❤️

Shortcode Resolution Priority

When multiple sources define the same shortcode, the last writer wins. Resolution runs in this order, where later entries overwrite earlier ones:

1. Built-in emoji IDs and their aliases
2. Data-level aliases (data.aliases)
3. Custom emoji IDs
4. Extra aliases

This means an extraAliases entry with the same key as a custom emoji ID will override that custom emoji’s shortcode. This is intentional — extraAliases acts as the highest-priority override.