4.22.2 • Published 2 weeks ago

emoji-picker-react

Licence

MIT

Version

4.22.2

Deps

Vulns

Weekly

Stars

1.5K

Summary Dependency Versions

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.

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>