Data Sources

react-emoji-text supports two emoji data sources via adapter functions. Install whichever you prefer and pass the adapted data to EmojiProvider.

Installation

@emoji-mart/data

pnpm add react-emoji-text @emoji-mart/data

emojibase

pnpm add react-emoji-text emojibase-data

Setup

@emoji-mart/data

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

const data = fromEmojiMart(emojiMartData);

export function Message() {
  return (
    <EmojiProvider data={data}>
      <EmojiText>hello :wave:</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';
import { EmojiProvider, EmojiText } from 'react-emoji-text/react';

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

export function Message() {
  return (
    <EmojiProvider data={data}>
      <EmojiText>hello :wave:</EmojiText>
    </EmojiProvider>
  );
}

Comparison

	@emoji-mart/data	emojibase
Unicode version	Unicode 15	Unicode 17
Localization	Limited	27 languages via CLDR
Maintenance	Community maintained	Actively maintained
Format	Single JSON import	Data + shortcodes (separate imports)
Compact format	No	Yes (compact.json ~40% smaller)
Emoticons built-in	Via aliases	Via emoticon field

Live Example

@emoji-mart/dataemojibase

ASCII

hello 👋 world ❤️

Note: To see the adapters diverge, switch the playground between @emoji-mart/data and emojibase and paste this text:

:face_with_eye_bags: :phoenix: :lime: :brown_mushroom: :broken_chain: :leafless_tree: :shovel: :orca:

These examples are in emojibase-data@17 but not in the @emoji-mart/data set, so they stay as plain text with the emoji-mart adapter and render with emojibase.

Emoji Pickers

If your app also needs an emoji picker, these pair naturally with each data source:

• @emoji-mart/data → emoji-mart by Missive — a full-featured picker that shares the same dataset
• emojibase → frimousse by Liveblocks — a lightweight, headless picker built on emojibase

Using the same data source for both rendering and picking means zero duplication in your bundle.

Using the Compact Format

Emojibase offers a compact format that reduces bundle size by ~40%:

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

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

The adapter auto-detects whether you pass full or compact data.

Localization with Emojibase

Emojibase supports 27 languages. Swap the locale in the import path:

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

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

Compat Layer

The react-emoji-text/compat entry point (drop-in replacement for react-emoji-render) works with either data source. Pass adapted data via the options prop:

@emoji-mart/data

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

const data = fromEmojiMart(emojiMartData);

<Emoji text="hello :wave:" options={{ data }} />
toArray('hello :wave:', { data });

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

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

<Emoji text="hello :wave:" options={{ data }} />
toArray('hello :wave:', { data });