Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
EmojiPicker
✓ import EmojiPicker from 'emoji-picker-react';
✗ import { EmojiPicker } from 'emoji-picker-react';
const EmojiPicker = require('emoji-picker-react');
EmojiPicker is a default export, so use 'import EmojiPicker from ...' for ESM. CommonJS 'require' pattern is generally discouraged in modern React projects.
Theme
✓ import { Theme } from 'emoji-picker-react';
Used for controlling the picker's visual theme (LIGHT, DARK, AUTO).
EmojiStyle
✓ import { EmojiStyle } from 'emoji-picker-react';
Used for selecting the visual style of emojis (APPLE, GOOGLE, FACEBOOK, TWITTER, NATIVE).
EmojiClickData
✓ import { EmojiClickData } from 'emoji-picker-react';
TypeScript type for the object returned by the onEmojiClick callback.
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.
import React, { useState } from 'react';
import EmojiPicker, { EmojiClickData, Theme, EmojiStyle } from 'emoji-picker-react';
function App() {
const [selectedEmoji, setSelectedEmoji] = useState<string>('');
const [showPicker, setShowPicker] = useState<boolean>(false);
const onEmojiClick = (emojiObject: EmojiClickData, event: MouseEvent) => {
setSelectedEmoji(emojiObject.emoji);
setShowPicker(false); // Close picker after selection
console.log("Selected emoji data:", emojiObject);
console.log("Event:", event);
};
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }}>
<h1>Emoji Picker React Example</h1>
<button onClick={() => setShowPicker(!showPicker)} style={{ marginBottom: '20px', padding: '10px 20px' }}>
{showPicker ? 'Hide Emoji Picker' : 'Show Emoji Picker'}
</button>
{selectedEmoji && <p style={{ fontSize: '2em' }}>You selected: {selectedEmoji}</p>}
{showPicker && (
<EmojiPicker
onEmojiClick={onEmojiClick}
theme={Theme.AUTO} // Use auto theme based on system preference
emojiStyle={EmojiStyle.APPLE} // Prefer Apple style emojis
lazyLoadEmojis={true} // Load emojis on scroll
autoFocusSearch={true}
width="100%"
height={400}
/>
)}
</div>
);
}
export default App;
Debug
Known issues
breakingVersion 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.fixReview the v4 documentation for styling via CSS variables and the new prop API. Remove deprecated styling props.
affects: >=4.0.0
breakingVersion 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.fixConsult the v2 documentation for styling and prop changes. Migrate custom styles to SASS variables if targeting v2.x.
affects: >=2.0.0 <4.0.0
gotchaIn 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.fixUpgrade to version 2.0.2 or newer, or 1.7.2 or newer, as this issue was addressed with a `preventDefault` handler.
affects: <2.0.2 || <1.7.2
Errors
Common errors & fixes
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.
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.
fixEnsure you are using the default import: `import EmojiPicker from 'emoji-picker-react';`
Module not found: Can't resolve 'emoji-picker-react'
The package is not installed or the package name is misspelled.
fixInstall the package: `npm install emoji-picker-react` or `yarn add emoji-picker-react`.
Peer dependency 'react@>=16' not met.
Your project's React version does not meet the minimum requirement, or React is not installed.
fixEnsure 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`.
Custom styling applied via props (e.g., `width`, `height`, `pickerStyle`) is not working after upgrading.
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.
fixFor 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.
Audit
Dependencies
reactrequiredPeer dependency for the React component to function.