{"id":10787,"library":"emoji-picker-react","title":"React Emoji Picker","description":"emoji-picker-react is a popular, actively maintained React component library providing a fully customizable emoji picker for web applications. The current stable version is 4.18.0. The library receives regular updates, including significant breaking changes in major versions like 2.0.0 and 4.0.0 that refined its UI and customization model. Key differentiators include extensive customization options via CSS variables, native dark mode support, multi-language capabilities, support for custom image-based emojis, and a responsive, zero-configuration setup with various emoji styles (Apple, Google, etc.). It aims to be an out-of-the-box solution with sensible defaults while offering deep control for specific use cases.","status":"active","version":"4.18.0","language":"javascript","source_language":"en","source_url":"https://github.com/ealush/emoji-picker-react","tags":["javascript","emoji-picker","react-emoji-picker","emoji","emojis","reactions","reactions-picker","emoji-reactions","typescript"],"install":[{"cmd":"npm install emoji-picker-react","lang":"bash","label":"npm"},{"cmd":"yarn add emoji-picker-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add emoji-picker-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the React component to function.","package":"react","optional":false}],"imports":[{"note":"EmojiPicker is a default export, so use 'import EmojiPicker from ...' for ESM. CommonJS 'require' pattern is generally discouraged in modern React projects.","wrong":"import { EmojiPicker } from 'emoji-picker-react';\nconst EmojiPicker = require('emoji-picker-react');","symbol":"EmojiPicker","correct":"import EmojiPicker from 'emoji-picker-react';"},{"note":"Used for controlling the picker's visual theme (LIGHT, DARK, AUTO).","symbol":"Theme","correct":"import { Theme } from 'emoji-picker-react';"},{"note":"Used for selecting the visual style of emojis (APPLE, GOOGLE, FACEBOOK, TWITTER, NATIVE).","symbol":"EmojiStyle","correct":"import { EmojiStyle } from 'emoji-picker-react';"},{"note":"TypeScript type for the object returned by the onEmojiClick callback.","symbol":"EmojiClickData","correct":"import { EmojiClickData } from 'emoji-picker-react';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport EmojiPicker, { EmojiClickData, Theme, EmojiStyle } from 'emoji-picker-react';\n\nfunction App() {\n const [selectedEmoji, setSelectedEmoji] = useState('');\n const [showPicker, setShowPicker] = useState(false);\n\n const onEmojiClick = (emojiObject: EmojiClickData, event: MouseEvent) => {\n setSelectedEmoji(emojiObject.emoji);\n setShowPicker(false); // Close picker after selection\n console.log(\"Selected emoji data:\", emojiObject);\n console.log(\"Event:\", event);\n };\n\n return (\n
\n

Emoji Picker React Example

\n \n {selectedEmoji &&

You selected: {selectedEmoji}

}\n\n {showPicker && (\n \n )}\n
\n );\n}\n\nexport default App;\n","lang":"typescript","description":"This example demonstrates how to render the EmojiPicker component, handle emoji selection, toggle its visibility, and customize its appearance with theme and emoji style options."},"warnings":[{"fix":"Review the v4 documentation for styling via CSS variables and the new prop API. Remove deprecated styling props.","message":"Version 4.0.0 introduced significant breaking changes. Direct customization props were removed, and styling is now primarily handled via CSS variables. Users upgrading from v3 or earlier must refactor their styling.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Consult the v2 documentation for styling and prop changes. Migrate custom styles to SASS variables if targeting v2.x.","message":"Version 2.0.0 was a major redesign. It updated the UI, removed many customization props, and moved styling to SASS variables. Users upgrading from v1.x need to adjust their styling and prop usage.","severity":"breaking","affected_versions":">=2.0.0 <4.0.0"},{"fix":"Upgrade to version 2.0.2 or newer, or 1.7.2 or newer, as this issue was addressed with a `preventDefault` handler.","message":"In versions prior to 2.0.2 and 1.7.2, clicking an emoji could add a '#!' to the URL, causing unexpected re-renders in applications using client-side routing like React Router.","severity":"gotcha","affected_versions":"<2.0.2 || <1.7.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using the default import: `import EmojiPicker from 'emoji-picker-react';`","cause":"Incorrect import statement for the EmojiPicker component, typically trying to use a named import for a default export, or a CommonJS require in an ESM context.","error":"TypeError: (0, _emojiPickerReact.default) is not a function OR Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"fix":"Install the package: `npm install emoji-picker-react` or `yarn add emoji-picker-react`.","cause":"The package is not installed or the package name is misspelled.","error":"Module not found: Can't resolve 'emoji-picker-react'"},{"fix":"Ensure your project has `react` and `react-dom` installed and updated to version 16 or higher. E.g., `npm install react react-dom` or `yarn add react react-dom`.","cause":"Your project's React version does not meet the minimum requirement, or React is not installed.","error":"Peer dependency 'react@>=16' not met."},{"fix":"For v4.x, migrate your custom styles to use CSS variables. For v2.x-v3.x, use SASS variables. Refer to the specific major version's documentation for styling customization.","cause":"Major versions (v2.0.0 and v4.0.0) significantly changed the styling mechanism, removing many direct styling props in favor of SASS/CSS variables.","error":"Custom styling applied via props (e.g., `width`, `height`, `pickerStyle`) is not working after upgrading."}],"ecosystem":"npm"}