Emoji Picker React

The most popular fully customizable emoji picker for React.

Live Demo | Report a Bug

Features

• Fully customizable through props and CSS variables
• Light, dark, and auto themes
• Reactions picker mode and custom click handlers
• Dozens of built-in languages
• Custom image-based emojis
• Apple, Google, Facebook, Twitter, and native emoji styles
• Responsive and mobile-friendly
• SSR-safe

Installation

npm install emoji-picker-react

Usage

import EmojiPicker from 'emoji-picker-react';

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

onEmojiClick receives an EmojiClickData object (unified code, names, image URL, active skin tone) and the underlying mouse event.

Configuration

<EmojiPicker
  theme="dark"
  emojiStyle="native"
  width={320}
  height={400}
  previewConfig={{ showPreview: false }}
/>

See PROPS.md for the complete props reference.

Styling

No stylesheet import needed. All styles are scoped via ShipStyles — generated class names are hashed, so the picker's CSS won't leak into or clash with your app's styles.

Restyle the picker by overriding CSS variables on .EmojiPickerReact:

.EmojiPickerReact {
  --epr-emoji-size: 32px;
}

Internationalization

Pass imported locale data via 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} />;
}

See INTERNATIONALIZATION.md for the supported languages.

Customization

Custom emojis, custom category icons, preview configuration, and CSP nonces are covered in CUSTOMIZATION.md.

Server-Side Rendering

The picker renders on the server, with styles inlined into the server HTML — no setup needed. Since the picker is usually opened on demand rather than shown immediately, lazy-loading it is still recommended to keep the initial bundle small:

import dynamic from 'next/dynamic';

const Picker = dynamic(() => import('emoji-picker-react'));

Troubleshooting

global is not defined (Vite, versions before 4.20)

Since 4.20 the picker is SSR-safe and no longer references the Node-style global. If you see global is not defined, upgrade to the latest version. On older versions only, the workaround was adding this to your HTML:

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

More from the maintainer

Building complex forms? Check out Vest — a validation framework for stateful, async, and dependent validation.

Contributing

Contributions are welcome — see the Contributing Guide.

Design inspiration by Pavel Bolo.