@emoji-mart/react

What is @emoji-mart/react?

@emoji-mart/react is a comprehensive emoji picker component for React applications. It provides a customizable and easy-to-use interface for selecting emojis, supporting various categories, skin tones, and search functionalities.

What are @emoji-mart/react's main functionalities?

Emoji Picker

The basic emoji picker component allows users to select emojis. The selected emoji is logged to the console in this example.

import { Picker } from '@emoji-mart/react';

function App() {
  return <Picker onEmojiSelect={console.log} />;
}

Customizable Emoji Picker

The emoji picker can be customized with different themes, such as 'dark' mode, to better fit the application's design.

import { Picker } from '@emoji-mart/react';

function App() {
  return <Picker theme="dark" onEmojiSelect={console.log} />;
}

Search Functionality

The emoji picker includes a search bar to allow users to quickly find specific emojis.

import { Picker } from '@emoji-mart/react';

function App() {
  return <Picker onEmojiSelect={console.log} showSearch={true} />;
}

Skin Tone Selector

The emoji picker supports selecting different skin tones for applicable emojis.

import { Picker } from '@emoji-mart/react';

function App() {
  return <Picker onEmojiSelect={console.log} showSkinTones={true} />;
}

Other packages similar to @emoji-mart/react

emoji-picker-react

emoji-picker-react is another popular emoji picker for React applications. It offers a simple and intuitive interface for selecting emojis, but it may not have as many customization options as @emoji-mart/react.

react-emoji-picker

react-emoji-picker provides a straightforward emoji picker component for React. It is lightweight and easy to integrate but might lack some advanced features like skin tone selection and extensive customization.

emoji-mart

emoji-mart is the original emoji picker library that @emoji-mart/react is based on. It offers similar functionalities but is designed for vanilla JavaScript rather than React specifically.

README

@emoji-mart/react

A React wrapper for EmojiMart.

🧑‍💻 Usage

npm install --save emoji-mart @emoji-mart/data @emoji-mart/react

import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

function App() {
  return (
    <Picker data={data} onEmojiSelect={console.log} />
  )
}

📚 Documentation

See https://github.com/missive/emoji-mart#react