🥒 Emoji Picker React (v4)

The most popular, fully customizable emoji picker for React apps.

🔴 Live Demo | 🐛 Report a Bug

✨ Features

• 🎨 Fully Customizable: Control styles via CSS variables.
• 🌗 Dark Mode: Native support for light, dark, and auto themes.
• 🖱️ Interactivity: Custom click handlers and reactions picker mode.
• 🌍 Multi-Language: Built-in support for dozens of languages.
• 🦄 Custom Emojis: seamless support for custom image-based emojis.
• 📦 Zero-Config: Works out of the box with sensible defaults.
• 📱 Responsive: Mobile-friendly design.
• 🍎 Multiple Styles: Support for Apple, Google, Facebook, Twitter, and Native system emojis.

🚀 Getting Started

Installation

npm install emoji-picker-react

Basic Usage

Render the component in your app. It works immediately with no required props.

import EmojiPicker from 'emoji-picker-react';

function App() {
  return (
    <div>
      <EmojiPicker onEmojiClick={(emojiObject) => console.log(emojiObject)} />
    </div>
  );
}

📚 Props Reference

The following is a complete list of all props accepted by EmojiPicker.

🎛️ General Configuration

📐 Dimensions & Styling

🖱️ Events & Interaction

🔎 Search & Categories

🦄 Customization & Advanced

❤️ Reactions Picker Mode

🛠️ Detailed Configuration

CSS Variables

Override default variables by targeting .EmojiPickerReact or aside.EmojiPickerReact.

CSS Variables

You can customize the picker by overriding CSS variables.

🎨 View Full List of CSS Variables

Custom Emojis Data Structure

When passing customEmojis, use this format:

{
  id: string;      // Unique ID
  names: string[]; // Search keywords
  imgUrl: string;  // Image source
}

Preview Config

Control the footer preview area using previewConfig:

{
  defaultEmoji: string; // Default: "1f60a"
  defaultCaption: string; // Default: "What's your mood?"
  showPreview: boolean; // Default: true
}

Custom Category Icons

You can customize the navigation icons using one of two methods.

Method 1: The categoryIcons prop

Map Categories enum values to valid React nodes:

import EmojiPicker, { Categories } from 'emoji-picker-react';

<EmojiPicker
  categoryIcons={{
    [Categories.SUGGESTED]: <img src="recent.png" alt="Recent" />,
    [Categories.SMILEYS_PEOPLE]: <MyCustomFaceIcon />,
  }}
/>;

Method 2: The categories configuration array

Define the icon directly within the category configuration object:

import EmojiPicker, { Categories } from 'emoji-picker-react';

<EmojiPicker
  categories={[
    {
      category: Categories.SUGGESTED,
      name: 'Recently Used',
      icon: <img src="recent.png" alt="Recent" />,
    },
    {
      category: Categories.SMILEYS_PEOPLE,
      name: 'Smileys & People',
      icon: <MyCustomFaceIcon />,
    },
  ]}
/>;

Note: If both methods are used for the same category, the icon from the categories configuration takes precedence over the categoryIcons prop.

🌍 Internationalization (i18n)

Import the dictionary you need and pass it to the emojiData prop.

import EmojiPicker from 'emoji-picker-react';
import es from 'emoji-picker-react/dist/data/emojis-es'; // Spanish

function App() {
  return <EmojiPicker emojiData={es} />;
}

⚠️ Troubleshooting

Server-Side Rendering (Next.js / Remix)

This package relies on the window object and must be rendered on the client.

Next.js Example:

import dynamic from 'next/dynamic';

const Picker = dynamic(() => import('emoji-picker-react'), { ssr: false });

Vite

If you encounter global is not defined, add this to your HTML:

<script>
  window.global = window;
</script>

🤝 Contributing

We welcome contributions! Please check out the Contributing Guide for how to run the project locally.

Shout Outs:
Design inspiration by Pavel Bolo.

If you enjoy using emoji-picker-react, check out Vest validation framework.