emoji-picker-react 4.20.0 → 4.20.2

package/README.md

@@ -1,218 +1,77 @@
-# 🥒 Emoji Picker React (v4)
+# Emoji Picker React
 
-**The most popular, fully customizable emoji picker for React apps.**
+The most popular fully customizable emoji picker for React.
 
-**[🔴 Live Demo](https://ealush.com/emoji-picker-react)** | **[🐛 Report a Bug](https://github.com/ealush/emoji-picker-react/issues)**
+[![npm downloads](https://img.shields.io/npm/dm/emoji-picker-react.svg)](https://www.npmjs.com/package/emoji-picker-react)
+
+**[Live Demo](https://ealush.com/emoji-picker-react)** | **[Report a Bug](https://github.com/ealush/emoji-picker-react/issues)**
 
 ![image](https://github.com/ealush/emoji-picker-react/assets/11255103/48901306-e7fd-49cd-8f1e-9b214083a61d)
 
 ![reactions](https://github.com/ealush/emoji-picker-react/assets/11255103/c28cc954-dc1d-4d82-91a8-64a74cf1d598)
 
----
-
-## ✨ Features
-
-- 🎨 **Fully Customizable**: Control styles via CSS variables.
-- 🌗 **Dark Mode**: Native support for light, dark, and auto themes.
-- 🖱️ **Interactivity**: Custom click handlers and reactions picker mode.
-- 🌍 **Multi-Language**: Built-in support for dozens of languages.
-- 🦄 **Custom Emojis**: seamless support for custom image-based emojis.
-- 📦 **Zero-Config**: Works out of the box with sensible defaults.
-- 📱 **Responsive**: Mobile-friendly design.
-- 🍎 **Multiple Styles**: Support for Apple, Google, Facebook, Twitter, and Native system emojis.
-
----
+## Features
 
-## 🚀 Getting Started
+- 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
+## Installation
 
 ```bash
 npm install emoji-picker-react
-
 ```
 
-### Basic Usage
-
-Render the component in your app. It works immediately with no required props.
+## Usage
 
 ```jsx
 import EmojiPicker from 'emoji-picker-react';
 
 function App() {
   return (
-    <div>
-      <EmojiPicker onEmojiClick={(emojiObject) => console.log(emojiObject)} />
-    </div>
+    <EmojiPicker onEmojiClick={(emojiData) => console.log(emojiData.emoji)} />
   );
 }
 ```
 
----
-
-## 📚 Props Reference
-
-The following is a complete list of all props accepted by `EmojiPicker`.
-
-### 🎛️ General Configuration
-
-| Prop              | Type         | Default            | Description                                                                                  |
-| ----------------- | ------------ | ------------------ | -------------------------------------------------------------------------------------------- |
-| `open`            | `boolean`    | `true`             | Controls the visibility of the picker.                                                       |
-| `theme`           | `Theme`      | `Theme.LIGHT`      | The visual theme. Options: `'light'`, `'dark'`, `'auto'`.                                    |
-| `emojiStyle`      | `EmojiStyle` | `EmojiStyle.APPLE` | The emoji set to use. Options: `'apple'`, `'google'`, `'facebook'`, `'twitter'`, `'native'`. |
-| `emojiVersion`    | `string`     | `null`             | Limit emojis to a specific unicode version (e.g., `"14.0"`).                                 |
-| `lazyLoadEmojis`  | `boolean`    | `false`            | If true, emoji images are loaded only when they scroll into view.                            |
-| `autoFocusSearch` | `boolean`    | `true`             | Focuses the search input automatically when the picker mounts.                               |
-| `emojiData`       | `object`     | `undefined`        | Pass imported locale data here for internationalization.                                     |
-
-### 📐 Dimensions & Styling
-
-| Prop        | Type            | Default  | Description                                |
-| ----------- | --------------- | -------- | ------------------------------------------ |
-| `width`     | `string`        | `number` | `350`                                      |
-| `height`    | `string`        | `number` | `450`                                      |
-| `style`     | `CSSProperties` | `{}`     | Inline styles applied to the root element. |
-| `className` | `string`        | `""`     | CSS class applied to the root element.     |
-
-### 🖱️ Events & Interaction
-
-| Prop               | Type                                                     | Description                                                          |
-| ------------------ | -------------------------------------------------------- | -------------------------------------------------------------------- |
-| `onEmojiClick`     | `(emojiData: EmojiClickData, event: MouseEvent) => void` | Callback triggered when a user clicks an emoji.                      |
-| `onReactionClick`  | `(emojiData: EmojiClickData, event: MouseEvent) => void` | Callback triggered when a user clicks a reaction (in reaction mode). |
-| `onSkinToneChange` | `(skinTone: SkinTones) => void`                          | Callback triggered when the user selects a new skin tone.            |
-
-### 🔎 Search & Categories
-
-| Prop                     | Type                     | Default                   | Description                                                          |
-| ------------------------ | ------------------------ | ------------------------- | -------------------------------------------------------------------- |
-| `searchDisabled`         | `boolean`                | `false`                   | If true, the search bar is completely removed.                       |
-| `searchPlaceholder`      | `string`                 | `"Search"`                | Placeholder text for the search input.                               |
-| `searchClearButtonLabel` | `string`                 | `"Clear"`                 | Aria label for the search clear button.                              |
-| `categories`             | `CategoryConfig[]`       | _(All)_                   | Array of category objects to customize order or visibility.          |
-| `suggestedEmojisMode`    | `SuggestionMode`         | `SuggestionMode.FREQUENT` | Logic for "Suggested" category. Options: `'recent'`, `'frequent'`.   |
-| `defaultSkinTone`        | `SkinTones`              | `SkinTones.NEUTRAL`       | The initial skin tone.                                               |
-| `skinTonesDisabled`      | `boolean`                | `false`                   | If true, users cannot change the skin tone.                          |
-| `skinTonePickerLocation` | `SkinTonePickerLocation` | `SEARCH`                  | Location of the skin tone trigger. Options: `'SEARCH'`, `'PREVIEW'`. |
-
-### 🦄 Customization & Advanced
-
-| Prop            | Type                                             | Default                 | Description                                                              |
-| --------------- | ------------------------------------------------ | ----------------------- | ------------------------------------------------------------------------ |
-| `customEmojis`  | `CustomEmoji[]`                                  | `[]`                    | Array of custom image-based emojis to inject.                            |
-| `hiddenEmojis`  | `string[]`                                       | `[]`                    | Array of unified IDs (e.g., `'1f921'`) to hide from the picker.          |
-| `previewConfig` | `PreviewConfig`                                  | `{ showPreview: true }` | Configuration for the bottom preview bar.                                |
-| `getEmojiUrl`   | `(unified: string, style: EmojiStyle) => string` | -                       | Function to override the default CDN URL for emoji images.               |
-| `categoryIcons` | `CategoryIcons`                                  | `{}`                    | Map `Categories` enum values to custom React nodes for navigation icons. |
-| `nonce`         | `string`                                         | `undefined`             | Content Security Policy (CSP) nonce for the inline style tag.            |
-
-### ❤️ Reactions Picker Mode
-
-| Prop                   | Type       | Default         | Description                                                              |
-| ---------------------- | ---------- | --------------- | ------------------------------------------------------------------------ |
-| `reactionsDefaultOpen` | `boolean`  | `false`         | If true, mounts in "Reactions" mode (single row) instead of full picker. |
-| `reactions`            | `string[]` | _(Default Set)_ | Array of unified IDs to display in the reactions bar.                    |
-| `allowExpandReactions` | `boolean`  | `true`          | If true, shows a `+` button to switch from reactions to full picker.     |
-
----
-
-## 🛠️ Detailed Configuration
-
-### CSS Variables
-
-Override default variables by targeting `.EmojiPickerReact` or `aside.EmojiPickerReact`.
-
-### CSS Variables
-
-You can customize the picker by overriding CSS variables.
-
-**[🎨 View Full List of CSS Variables](CSS_VARIABLES.md)**
-
-### Custom Emojis Data Structure
-
-When passing `customEmojis`, use this format:
-
-```ts
-{
-  id: string;      // Unique ID
-  names: string[]; // Search keywords
-  imgUrl: string;  // Image source
-}
-
-```
-
-### Content Security Policy (CSP)
+`onEmojiClick` receives an `EmojiClickData` object (unified code, names, image URL, active skin tone) and the underlying mouse event.
 
-If your site has a CSP that blocks inline styles, you can pass a `nonce` to the `EmojiPicker` component. This nonce will be applied to the inline `<style>` tag.
+## Configuration
 
 ```jsx
-<EmojiPicker nonce="your-nonce-value" />
-```
-
-### Preview Config
-
-Control the footer preview area using `previewConfig`:
-
-```ts
-{
-  defaultEmoji: string; // Default: "1f60a"
-  defaultCaption: string; // Default: "What's your mood?"
-  showPreview: boolean; // Default: true
-}
-```
-
-### Custom Category Icons
-
-You can customize the navigation icons using one of two methods.
-
-**Method 1: The `categoryIcons` prop**
-
-Map `Categories` enum values to valid React nodes:
-
-```tsx
-import EmojiPicker, { Categories } from 'emoji-picker-react';
-
 <EmojiPicker
-  categoryIcons={{
-    [Categories.SUGGESTED]: <img src="recent.png" alt="Recent" />,
-    [Categories.SMILEYS_PEOPLE]: <MyCustomFaceIcon />,
-  }}
-/>;
+  theme="dark"
+  emojiStyle="native"
+  width={320}
+  height={400}
+  previewConfig={{ showPreview: false }}
+/>
 ```
 
-**Method 2: The `categories` configuration array**
-
-Define the icon directly within the category configuration object:
+See [PROPS.md](PROPS.md) for the complete props reference.
 
-```tsx
-import EmojiPicker, { Categories } from 'emoji-picker-react';
+## Styling
 
-<EmojiPicker
-  categories={[
-    {
-      category: Categories.SUGGESTED,
-      name: 'Recently Used',
-      icon: <img src="recent.png" alt="Recent" />,
-    },
-    {
-      category: Categories.SMILEYS_PEOPLE,
-      name: 'Smileys & People',
-      icon: <MyCustomFaceIcon />,
-    },
-  ]}
-/>;
-```
+No stylesheet import needed. All styles are scoped via [Flairup](https://github.com/ealush/flairup) — generated class names are hashed, so the picker's CSS won't leak into or clash with your app's styles.
 
-> **Note:** If both methods are used for the same category, the icon from the `categories` configuration takes precedence over the `categoryIcons` prop.
+Restyle the picker by overriding [CSS variables](CSS_VARIABLES.md) on `.EmojiPickerReact`:
 
----
+```css
+.EmojiPickerReact {
+  --epr-emoji-size: 32px;
+}
+```
 
-## 🌍 Internationalization (i18n)
+## Internationalization
 
-Import the dictionary you need and pass it to the `emojiData` prop.
+Pass imported locale data via the `emojiData` prop:
 
-```javascript
+```jsx
 import EmojiPicker from 'emoji-picker-react';
 import es from 'emoji-picker-react/dist/data/emojis-es'; // Spanish
 
@@ -221,58 +80,29 @@ function App() {
 }
 ```
 
-<details>
-<summary><strong>View Supported Languages</strong></summary>
-
-- `emojis-bn` (Bengali 🇧🇩)
-- `emojis-da` (Danish 🇩🇰)
-- `emojis-de` (German 🇩🇪)
-- `emojis-en-gb` (English, GB 🇬🇧)
-- `emojis-en` (English, US 🇺🇸)
-- `emojis-es-mx` (Spanish, Mexico 🇲🇽)
-- `emojis-es` (Spanish 🇪🇸)
-- `emojis-et` (Estonian 🇪🇪)
-- `emojis-fi` (Finnish 🇫🇮)
-- `emojis-fr` (French 🇫🇷)
-- `emojis-hi` (Hindi 🇮🇳)
-- `emojis-hu` (Hungarian 🇭🇺)
-- `emojis-it` (Italian 🇮🇹)
-- `emojis-ja` (Japanese 🇯🇵)
-- `emojis-ko` (Korean 🇰🇷)
-- `emojis-lt` (Lithuanian 🇱🇹)
-- `emojis-ms` (Malay 🇲🇾)
-- `emojis-nb` (Norwegian Bokmål 🇳🇴)
-- `emojis-nl` (Dutch 🇳🇱)
-- `emojis-pl` (Polish 🇵🇱)
-- `emojis-pt` (Portuguese 🇵🇹)
-- `emojis-ru` (Russian 🇷🇺)
-- `emojis-sv` (Swedish 🇸🇪)
-- `emojis-th` (Thai 🇹🇭)
-- `emojis-uk` (Ukrainian 🇺🇦)
-- `emojis-zh-hant` (Traditional Chinese 🇹🇼)
-- `emojis-zh` (Simplified Chinese 🇨🇳)
-
-</details>
-
----
-
-## ⚠️ Troubleshooting
-
-### Server-Side Rendering (Next.js / Remix)
-
-This package relies on the `window` object and must be rendered on the client.
-
-**Next.js Example:**
+See [INTERNATIONALIZATION.md](INTERNATIONALIZATION.md) for the supported languages.
+
+## Customization
+
+Custom emojis, custom category icons, preview configuration, and CSP nonces are covered in [CUSTOMIZATION.md](CUSTOMIZATION.md).
+
+## Server-Side Rendering
+
+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:
 
 ```javascript
 import dynamic from 'next/dynamic';
 
-const Picker = dynamic(() => import('emoji-picker-react'), { ssr: false });
+const Picker = dynamic(() => import('emoji-picker-react'));
 ```
 
-### Vite
+## Troubleshooting
 
-If you encounter `global is not defined`, add this to your HTML:
+### `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:
 
 ```html
 <script>
@@ -280,17 +110,12 @@ If you encounter `global is not defined`, add this to your HTML:
 </script>
 ```
 
----
-
 ## More from the maintainer
 
 Building complex forms? Check out [**Vest**](https://vestjs.dev) — a validation framework for stateful, async, and dependent validation.
 
----
-
-## 🤝 Contributing
+## Contributing
 
-We welcome contributions! Please check out the [Contributing Guide](https://github.com/ealush/emoji-picker-react/blob/master/CONTRIBUTING.md) for how to run the project locally.
+Contributions are welcome — see the [Contributing Guide](https://github.com/ealush/emoji-picker-react/blob/master/CONTRIBUTING.md).
 
-**Shout Outs:**
 Design inspiration by [Pavel Bolo](https://pavelbolo.com).

package/dist/Stylesheet/stylesheet.d.ts

@@ -1,10 +1,16 @@
 import { Styles } from 'flairup';
 import * as React from 'react';
 export declare const stylesheet: {
-    create: <K extends string>(styles: Partial<{ [k in K]: Partial<Partial<CSSStyleDeclaration>> | Partial<{
+    create: <K extends string>(styles: Partial<{ [k in K]: Partial<{
         '.'?: string | string[] | undefined;
         '--'?: any;
-    }>; }> | Partial<{}>) => Record<Exclude<Exclude<K, any>, any>, Set<string>> & Record<never, Set<string>>;
+    }> | Partial<Partial<CSSStyleDeclaration> & Partial<{
+        '.'?: string | string[] | undefined;
+        '--'?: any;
+    }>>; }> | Partial<{}>) => Record<Exclude<Exclude<K, any>, any>, Set<string>> & Record<never, Set<string>>;
+    keyframes: <KF extends string>(keyframesInput: Record<KF, {
+        [stage: string]: Partial<CSSStyleDeclaration>;
+    }>) => Record<KF, string>;
     getStyle: () => string;
     isApplied: () => boolean;
 };
@@ -15,11 +21,17 @@ export declare const PickerStyleTag: React.NamedExoticComponent<{
 export declare const commonInteractionStyles: Record<never, Set<string>>;
 export declare function darkMode(key: string, value: Styles): {
     '.epr-dark-theme': {
-        [x: string]: Partial<Partial<CSSStyleDeclaration>>;
+        [x: string]: Partial<Partial<CSSStyleDeclaration> & Partial<{
+            '.'?: string | string[] | undefined;
+            '--'?: any;
+        }>>;
     };
     '.epr-auto-theme': {
         [x: string]: {
-            '@media (prefers-color-scheme: dark)': Partial<Partial<CSSStyleDeclaration>>;
+            '@media (prefers-color-scheme: dark)': Partial<Partial<CSSStyleDeclaration> & Partial<{
+                '.'?: string | string[] | undefined;
+                '--'?: any;
+            }>>;
         };
     };
 };

package/dist/dataUtils/emojiSelectors.d.ts

@@ -1,4 +1,3 @@
-import { Categories } from '../config/categoryConfig';
 import { CustomEmoji } from '../config/customEmojiConfig';
 import { EmojiStyle, SkinTones } from '../types/exposedTypes';
 import { DataEmoji, DataEmojis, WithName } from './DataTypes';
@@ -7,7 +6,6 @@ export declare function addedIn(emoji: DataEmoji): number;
 export declare function emojiName(emoji?: WithName): string;
 export declare function unifiedWithoutSkinTone(unified: string): string;
 export declare function emojiUnified(emoji: DataEmoji, skinTone?: string): string;
-export declare function useGetEmojisByCategory(): (Category: Categories) => DataEmojis;
 export declare function emojiUrlByUnified(unified: string, emojiStyle: EmojiStyle): string;
 export declare function emojiVariations(emoji: DataEmoji): string[];
 export declare function emojiHasVariations(emoji: DataEmoji): boolean;