emoji-picker-react 4.20.0 → 4.20.1

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,27 @@ 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)
+
+Add this to your HTML:
 
 ```html
 <script>
@@ -280,17 +108,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/emoji-picker-react.cjs.development.js

@@ -521,11 +521,10 @@ function useDebouncedState(initialValue, delay) {
   var timer = React.useRef(null);
   function debouncedSetState(value) {
     return new Promise(function (resolve) {
-      var _window;
       if (timer.current) {
         clearTimeout(timer.current);
       }
-      timer.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
+      timer.current = setTimeout(function () {
         setState(value);
         resolve(value);
       }, delay);
@@ -26745,14 +26744,24 @@ var defaultEmojiData = {
 	emojis: emojis
 };
 
+function useIsMounted() {
+  var _React$useState = React.useState(false),
+    isMounted = _React$useState[0],
+    setIsMounted = _React$useState[1];
+  React.useEffect(function () {
+    setIsMounted(true);
+  }, []);
+  return isMounted;
+}
+
 var SUGGESTED_LS_KEY = 'epr_suggested';
 function getSuggested(mode) {
   try {
-    var _window, _window$localStorage$, _window2;
-    if (!((_window = window) != null && _window.localStorage)) {
+    var _window$localStorage$;
+    if (typeof window === 'undefined' || !window.localStorage) {
       return [];
     }
-    var recent = JSON.parse((_window$localStorage$ = (_window2 = window) == null ? void 0 : _window2.localStorage.getItem(SUGGESTED_LS_KEY)) != null ? _window$localStorage$ : '[]');
+    var recent = JSON.parse((_window$localStorage$ = window.localStorage.getItem(SUGGESTED_LS_KEY)) != null ? _window$localStorage$ : '[]');
     if (mode === exports.SuggestionMode.FREQUENT) {
       return recent.sort(function (a, b) {
         return b.count - a.count;
@@ -26787,8 +26796,10 @@ function setSuggested(emoji, skinTone) {
   existing.count++;
   nextList.length = Math.min(nextList.length, 14);
   try {
-    var _window3;
-    (_window3 = window) == null ? void 0 : _window3.localStorage.setItem(SUGGESTED_LS_KEY, JSON.stringify(nextList));
+    if (typeof window === 'undefined') {
+      return;
+    }
+    window.localStorage.setItem(SUGGESTED_LS_KEY, JSON.stringify(nextList));
     // Prevents the change from being seen immediately.
   } catch (_unused2) {
     // ignore
@@ -26827,15 +26838,21 @@ function useGetEmojisByCategory() {
   var suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
   var _useUpdateSuggested = useUpdateSuggested(),
     suggestedUpdated = _useUpdateSuggested[0];
+  // Suggestions come from localStorage, which doesn't exist during SSR.
+  // Read them only after mount so the first client render matches the server.
+  var isMounted = useIsMounted();
   var suggested = React__default.useMemo(function () {
     var _getSuggested;
+    if (!isMounted) {
+      return [];
+    }
     var suggested = (_getSuggested = getSuggested(suggestedEmojisModeConfig)) != null ? _getSuggested : [];
     return suggested.map(function (s) {
       return emojiByUnified(s.unified);
     }).filter(Boolean);
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [suggestedUpdated, suggestedEmojisModeConfig]);
+  [isMounted, suggestedUpdated, suggestedEmojisModeConfig]);
   return function getEmojisByCategory(category) {
     var _emojis$emojis$catego;
     if (category === exports.Categories.SUGGESTED) {
@@ -26958,8 +26975,14 @@ function useGetEmojisByCategory$1() {
   var suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
   var _useUpdateSuggested = useUpdateSuggested(),
     suggestedUpdated = _useUpdateSuggested[0];
+  // Suggestions come from localStorage, which doesn't exist during SSR.
+  // Read them only after mount so the first client render matches the server.
+  var isMounted = useIsMounted();
   var suggested = React__default.useMemo(function () {
     var _getSuggested;
+    if (!isMounted) {
+      return [];
+    }
     var suggested = (_getSuggested = getSuggested(suggestedEmojisModeConfig)) != null ? _getSuggested : [];
     return suggested.map(function (s) {
       var _extends2;
@@ -26968,7 +26991,7 @@ function useGetEmojisByCategory$1() {
       return _extends({}, emoji, (_extends2 = {}, _extends2[EmojiProperties.unified] = s.unified, _extends2));
     }).filter(Boolean);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [suggestedUpdated, suggestedEmojisModeConfig, emojiByUnified]);
+  }, [isMounted, suggestedUpdated, suggestedEmojisModeConfig, emojiByUnified]);
   return function getEmojisByCategory(category) {
     var _emojiData$emojis$cat, _emojiData$emojis;
     if (category === exports.Categories.SUGGESTED) {
@@ -28800,7 +28823,6 @@ function useMouseDownHandlers(ContainerRef, mouseEventSource) {
     onEmojiClick(emojiClickOutput(emoji, skinToneToUse, activeEmojiStyle, getEmojiUrl), event);
   }, [activeSkinTone, closeAllOpenToggles, disallowClickRef, emojiByUnified, onEmojiClick, updateSuggested, getEmojiUrl, activeEmojiStyle]);
   var onMouseDown = React.useCallback(function onMouseDown(event) {
-    var _window;
     if (mouseDownTimerRef.current) {
       clearTimeout(mouseDownTimerRef.current);
     }
@@ -28809,7 +28831,7 @@ function useMouseDownHandlers(ContainerRef, mouseEventSource) {
     if (!emoji || !emojiHasVariations$1(emoji)) {
       return;
     }
-    mouseDownTimerRef.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
+    mouseDownTimerRef.current = setTimeout(function () {
       disallowClickRef.current = true;
       mouseDownTimerRef.current = undefined;
       closeAllOpenToggles();
@@ -29547,6 +29569,10 @@ var styles$7 = /*#__PURE__*/stylesheet.create({
   }
 });
 
+// `useLayoutEffect` warns during SSR since it never runs on the server.
+// Fall back to `useEffect` there: measurement only matters on the client.
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 function MeasureEmoji() {
   var categories = useCategoriesConfig();
   var getEmojisByCategory = useGetEmojisByCategory();
@@ -29559,7 +29585,7 @@ function MeasureEmoji() {
     emojiSize = _useEmojiSizeState[0],
     setEmojiSize = _useEmojiSizeState[1];
   var ref = React.useRef(null);
-  React.useLayoutEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     if (ref.current) {
       setEmojiSize(ref.current.clientHeight);
     }