Getting started

Get started with @mantine/emoji package

Docs

Package

License

Installation

yarn add @mantine/emoji

After installation import package styles at the root of your application:

import '@mantine/core/styles.css';
// ‼️ import emoji styles after core package styles
import '@mantine/emoji/styles.css';

Emoji data

@mantine/emoji does not include emoji data, you need to pass it with the data prop. The package exports adapters for the two most popular emoji data sources:

Using @emoji-mart/data

Install the data package:

yarn add @emoji-mart/data

Then use the adapter to convert the data:

import data from '@emoji-mart/data';
import { emojiMartAdapter, EmojiPicker } from '@mantine/emoji';

const emojiData = emojiMartAdapter(data);

function Demo() {
  return <EmojiPicker data={emojiData} />;
}

Using emojibase-data

Install the data package:

yarn add emojibase-data

Then use the adapter to convert the data:

import data from 'emojibase-data/en/data.json';
import messages from 'emojibase-data/en/messages.json';
import { emojibaseAdapter, EmojiPicker } from '@mantine/emoji';

const emojiData = emojibaseAdapter(data, messages);

function Demo() {
  return <EmojiPicker data={emojiData} />;
}

Custom data

You can also provide data directly using the EmojiPickerData interface:

import { EmojiPicker, EmojiPickerData } from '@mantine/emoji';

const data: EmojiPickerData = {
  categories: [
    { id: 'people', label: 'Smileys & People', emojis: ['grinning', 'wave'] },
  ],
  emojis: {
    grinning: {
      id: 'grinning',
      name: 'Grinning Face',
      keywords: ['happy', 'smile'],
      emoji: '😀',
    },
    wave: {
      id: 'wave',
      name: 'Waving Hand',
      keywords: ['hello', 'hi'],
      emoji: '👋',
      skins: ['👋🏻', '👋🏼', '👋🏽', '👋🏾', '👋🏿'],
    },
  },
};

function Demo() {
  return <EmojiPicker data={data} />;
}

Canonical category IDs

Both adapters return the same category IDs in the following order. Use these IDs as keys of the categoryLabels prop:

people – Smileys & People
nature – Animals & Nature
foods – Food & Drink
activity – Activity
places – Travel & Places
objects – Objects
symbols – Symbols
flags – Flags

frequent category is not returned by the adapters. To display recently used emojis, add a category with id: 'frequent' to your data. It is displayed with a clock icon in the category navigation.

Diff

EmojiPicker