repository·master·Indexed 23 days ago
https://github.com/ealush/emoji-picker-reactA highly customizable and responsive emoji picker component for React web applications. It supports multiple emoji styles (Apple, Google, Facebook, Twitter, native), dark mode, internationalization, and custom image-based emojis. Features include a reactions picker mode, skin tone selection, and a searchable interface with configurable categories. Version 4.19.1.
You can transform the picker into a single-row reactions bar using the following props:
| Prop | Type | Default | Description |
|---|---|---|---|
reactionsDefaultOpen | boolean | false | If true, mounts in single-row reaction mode |
reactions | string[] | (Default Set) | Array of unified IDs to display |
allowExpandReactions | boolean | true | If true, shows a + button to switch to full picker |
You can customize navigation icons using two methods. If both are used for the same category, the categories configuration takes precedence.
Method 1: Using the categoryIcons prop
Map Categories enum values to React nodes:
import EmojiPicker, { Categories } from 'emoji-picker-react';
<EmojiPicker
categoryIcons={{
[Categories.SUGGESTED]: <img src="recent.png" alt="Recent" />,
[Categories.SMILEYS_PEOPLE]: <MyCustomFaceIcon />,
}}
/>;Method 2: Using the categories configuration array
Define the icon directly within the category object:
import EmojiPicker, { Categories } from 'emoji-picker-react';
<EmojiPicker
categories={[
{
category: Categories.SUGGESTED,
name: 'Recently Used',
icon: <img src="recent.png" alt="Recent" />,
},
{
category: Categories.SMILEYS_PEOPLE,
name: 'Smileys & People',
icon: <MyCustomFaceIcon />,
},
]}
/>;To use the emoji picker in your React application, install the package using npm:
npm install emoji-picker-reactYou can customize the appearance of the emoji picker by overriding its CSS variables. To apply styles, target the .EmojiPickerReact class or the aside.EmojiPickerReact selector in your CSS.
.EmojiPickerReact {
--epr-emoji-size: 32px;
}To change the language of the picker, import the desired locale data and pass it to the emojiData prop.
Example for Spanish:
import EmojiPicker from 'emoji-picker-react';
import es from 'emoji-picker-react/dist/data/emojis-es'; // Spanish
function App() {
return <EmojiPicker emojiData={es} />;
}When using mergeCategoriesConfig, the userCategoriesConfig parameter (of type UserCategoryConfig) determines the order and content of the category list. It supports two types of entries:
Categories enum (e.g., Categories.FLAGS) will include that category using its default configuration.category property matches the enum value.If userCategoriesConfig is empty or not provided, the picker defaults to the standard ordered list of categories.
If you encounter a global is not defined error in Vite, add the following script to your HTML to define the global object:
<script>
window.global = window;
</script>This package requires the window object and cannot be rendered on the server. When using Next.js, use next/dynamic with ssr: false to load the component only on the client.
import dynamic from 'next/dynamic';
const Picker = dynamic(() => import('emoji-picker-react'), { ssr: false });Render the EmojiPicker component in your application. It works immediately with sensible defaults and no required props. You can use the onEmojiClick prop to handle emoji selections.
import EmojiPicker from 'emoji-picker-react';
function App() {
return (
<div>
<EmojiPicker onEmojiClick={(emojiObject) => console.log(emojiObject)} />
</div>
);
}To inject custom image-based emojis, pass an array to the customEmojis prop. Each object must follow this structure:
{
id: string; // Unique ID
names: string[]; // Search keywords
imgUrl: string; // Image source
}