Emoji Picker React

emoji-picker-react is a drop-in <EmojiPicker /> component that renders a complete, searchable emoji picker with category navigation, skin-tone selection, and a dedicated “reactions bar” mode for chat-style UIs. It works with no required props out of the box, then layers on deep customization via CSS variables, custom emoji injection, and per-category icon overrides.

The component supports light/dark/auto themes, multiple emoji rendering styles (Apple, Google, Facebook, Twitter, or native system emojis), lazy-loaded emoji images for performance, and built-in i18n data for dozens of languages — making it one of the most complete single-package emoji picker solutions for React apps.

What You Get

• A zero-config <EmojiPicker /> component with search, category navigation, and skin-tone selection built in
• A “reactions picker” mode (reactionsDefaultOpen) that renders a compact single-row reaction bar instead of the full picker, common in chat apps
• Support for custom image-based emojis (customEmojis) alongside the standard emoji set, with a documented data shape
• Built-in i18n emoji data for dozens of languages, imported and passed via the emojiData prop
• CSS-variable-based theming (light/dark/auto) plus a getEmojiUrl override for serving emoji images from a custom CDN

Common Use Cases

• Adding an emoji picker to a chat, comment, or messaging input in a React app
• Building a reactions bar (like Slack/Discord message reactions) using the compact reactions-picker mode
• Supporting non-English users with localized emoji search via the built-in language data files
• Rendering a brand-specific or custom emoji set (e.g. company Slack-style custom emojis) alongside standard Unicode emojis

Under The Hood

Architecture — The root EmojiPickerReact.tsx component composes category navigation, a search bar, a virtualized emoji grid, and a skin-tone/preview footer as independent subcomponents under src/components/. Emoji rendering uses a virtualization module to only render emoji rows near the visible scroll area, keeping the DOM small even though the full emoji dataset (thousands of entries across categories and locales) is loaded. Per-locale emoji data lives under src/data/ as separate importable modules (emojis-es, emojis-ja, etc.) so consumers only bundle the languages they actually import.

Tech Stack — Nearly 100% TypeScript, built with tsdx (zero-config TypeScript package tooling) producing both a build and a build:data step that compiles the emoji/locale datasets separately from the component code. The component depends on the browser window object directly, which is why the README explicitly documents SSR workarounds for Next.js/Remix (dynamic import with ssr: false) and Vite (window.global polyfill).

Code Quality — Tests live in a top-level test/ directory (not colocated with source) organized by concern — components/, hooks/ — covering individual pieces like CategoryButton, ErrorBoundary, SkinTonePicker, useKeyboardNavigation, and useEmojiVirtualization, run via Vitest with a dedicated GitHub Actions tests.yml workflow. An ErrorBoundary component wrapping picker internals is a notable defensive touch for a UI component meant to be dropped into arbitrary host applications.

API Design — The component works with zero required props (<EmojiPicker onEmojiClick={...} /> is a complete integration) while exposing a large, well-documented prop surface (dozens of props covering dimensions, theming, search, categories, and reactions mode) for teams that need deeper control — a common and effective pattern for widely-reused UI components. Keyboard navigation and ARIA labels (searchClearButtonLabel, category icons) suggest accessibility was a design consideration rather than an afterthought.