Compat API

A drop-in replacement for react-emoji-render. Pass adapted emoji data directly via options — no provider needed. Works with both @emoji-mart/data and emojibase-data.

Emoji Component

@emoji-mart/data

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

const data = fromEmojiMart(emojiMartData);

<Emoji text="hello :wave:" options={{ data }} />
<Emoji text=":wave:" onlyEmojiClassName="jumbo" options={{ data }} />
<Emoji
  text=":wave:"
  svg
  options={{ data, imageUrlTemplate: '/emoji/{set}/{unified}.png' }}
/>

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';
import Emoji from 'react-emoji-text/compat';

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

<Emoji text="hello :wave:" options={{ data }} />
<Emoji text=":wave:" onlyEmojiClassName="jumbo" options={{ data }} />
<Emoji
  text=":wave:"
  svg
  options={{ data, imageUrlTemplate: '/emoji/{set}/{unified}.png' }}
/>

Try It

@emoji-mart/dataemojibase

hello 👋 world ❤️

Props

Prop	Type	Default	Description
text	string	required	Source text
onlyEmojiClassName	string	—	Class when content is only emojis
svg	boolean	—	When true, uses the "apple" set
options	CompatOptions	required	Tokenize and render options
ref	Ref<HTMLSpanElement>	—	Forwarded ref

All additional HTML attributes are forwarded to the wrapper <span>.

toArray

Returns an array of strings and React elements for manual rendering:

@emoji-mart/data

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

const data = fromEmojiMart(emojiMartData);
const elements = toArray('hello :wave:', { data });
// ['hello ', <span title="wave">👋</span>]

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';
import { toArray } from 'react-emoji-text/compat';

const data = fromEmojibase(emojis, { shortcodes });
const elements = toArray('hello :wave:', { data });
// ['hello ', <span title="wave">👋</span>]

Accepts the same CompatOptions as the Emoji component’s options prop.

Wrapper Pattern

Create a thin wrapper to pre-configure the data source once, then use it everywhere without repeating the adapter setup:

@emoji-mart/data

emoji.tsx

import emojiMartData from '@emoji-mart/data';
import { fromEmojiMart } from 'react-emoji-text/adapters/emoji-mart';
import BaseEmoji, { toArray as baseToArray } from 'react-emoji-text/compat';
import type { EmojiProps } from 'react-emoji-text/compat';

const data = fromEmojiMart(emojiMartData);

export default function Emoji(props: Omit<EmojiProps, 'options'>) {
  return <BaseEmoji {...props} options={{ data }} />;
}

export function toArray(text: string) {
  return baseToArray(text, { data });
}

emojibase

emoji.tsx

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';
import BaseEmoji, { toArray as baseToArray } from 'react-emoji-text/compat';
import type { EmojiProps } from 'react-emoji-text/compat';

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

export default function Emoji(props: Omit<EmojiProps, 'options'>) {
  return <BaseEmoji {...props} options={{ data }} />;
}

export function toArray(text: string) {
  return baseToArray(text, { data });
}

Then import from your wrapper instead:

import Emoji, { toArray } from './emoji';

<Emoji text="hello :wave:" />;
toArray('hello :wave:');

Divergences from react-emoji-render

• Data source: Uses adapter functions (fromEmojiMart or fromEmojibase) instead of the legacy dataset. More emojis, more accurate shortcodes.
• Data source agnostic: Works with both @emoji-mart/data and emojibase-data via their respective adapters.
• Skin tones: Supported via defaultSkin option (not available in the original).
• ASCII matching: Uses boundary-aware matching to avoid false positives in URLs and code.
• No EmojiProvider required: Data is passed directly via options.data — no React context provider needed.
• svg prop: Accepted for migration compatibility. It selects an image set, but callers still provide assets through options.getImageUrl, options.imageUrlTemplate, or options.sprite. This package does not host or bundle emoji images.