Getting Started

Installation

@emoji-mart/data

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

emojibase

pnpm add react-emoji-text emojibase-data

See Data Sources for a full comparison of the two options.

Quick Start

Wrap your app with EmojiProvider and use EmojiText to render emoji-enriched text.

@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>
  );
}

Try It

@emoji-mart/dataemojibase

ASCII

hello 👋 world ❤️

Entry Points

import { EmojiProvider, EmojiText } from 'react-emoji-text/react';
import { tokenize } from 'react-emoji-text/core';
import { fromEmojiMart } from 'react-emoji-text/adapters/emoji-mart';
import { fromEmojibase } from 'react-emoji-text/adapters/emojibase';
import Emoji, { toArray } from 'react-emoji-text/compat';

The root entry (react-emoji-text) re-exports the core and React APIs. Use the subpath entries when you want the smallest import surface.

EmojiProvider Props

Prop	Type	Default	Description
data	EmojiData	required	Emoji dataset — use fromEmojiMart() or fromEmojibase() adapters
set	"native" | "apple" | "google" | "twitter" | "facebook"	"native"	Emoji image set
defaultSkin	1 | 2 | 3 | 4 | 5 | 6	—	Default skin tone applied to all emojis
ascii	boolean	true	Match ASCII emoticons like :) and <3
customEmojis	CustomEmojiCategory[]	—	Custom emoji categories
extraAliases	Record<string, string>	—	Additional shortcode mappings
getImageUrl	(emoji, context) => string	—	Custom image URL resolver
imageUrlTemplate	string	—	URL template with {set}, {unified}, {skin} placeholders
sprite	SpriteConfig	—	Sprite sheet configuration

EmojiText Props

All EmojiProvider props except data can be overridden per-instance on EmojiText.

Prop	Type	Default	Description
children	string	—	Source text (mutually exclusive with text)
text	string	—	Source text (use when children contains slots)
as	keyof HTMLElementTagNameMap	"span"	Wrapper element tag
className	string	—	Class on the wrapper element
emojiClassName	string	—	Class applied to individual emoji images
onlyEmojiClassName	string	—	Class applied to the wrapper when content contains only emojis
ref	Ref<HTMLElement>	—	Forwarded ref to the wrapper element

Any additional HTML attributes are forwarded to the wrapper element.

<EmojiText as="p" className="message" data-testid="msg" title="Greeting">
  hello :wave:
</EmojiText>