emoji-picker-react 4.17.5 → 4.19.0

package/README.md

@@ -98,12 +98,13 @@ The following is a complete list of all props accepted by `EmojiPicker`.
 
 ### 🦄 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.      |
+| 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. |
 
 ### ❤️ Reactions Picker Mode
 
@@ -152,6 +153,50 @@ Control the footer preview area using `previewConfig`:
 }
 ```
 
+### 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 />,
+  }}
+/>;
+```
+
+**Method 2: The `categories` configuration array**
+
+Define the icon directly within the category configuration object:
+
+```tsx
+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 />,
+    },
+  ]}
+/>;
+```
+
+> **Note:** If both methods are used for the same category, the icon from the `categories` configuration takes precedence over the `categoryIcons` prop.
+
 ---
 
 ## 🌍 Internationalization (i18n)

package/dist/Stylesheet/stylesheet.d.ts

@@ -9,7 +9,9 @@ export declare const stylesheet: {
     isApplied: () => boolean;
 };
 export declare const commonStyles: Record<never, Set<string>>;
-export declare const PickerStyleTag: React.NamedExoticComponent<object>;
+export declare const PickerStyleTag: React.NamedExoticComponent<{
+    nonce?: string | undefined;
+}>;
 export declare const commonInteractionStyles: Record<never, Set<string>>;
 export declare function darkMode(key: string, value: Styles): {
     '.epr-dark-theme': {

package/dist/components/Layout/Flex.d.ts

@@ -9,5 +9,5 @@ declare type Props = Readonly<{
     style?: React.CSSProperties;
     direction?: FlexDirection;
 }>;
-export default function Flex({ children, className, style, direction }: Props): JSX.Element;
+export default function Flex({ children, className, style, direction, }: Props): JSX.Element;
 export {};

package/dist/components/body/EmojiCategory.d.ts

@@ -7,5 +7,5 @@ declare type Props = Readonly<{
     hiddenOnSearch?: boolean;
     height?: number;
 }>;
-export declare function EmojiCategory({ categoryConfig, children, hidden, hiddenOnSearch, height }: Props): JSX.Element;
+export declare function EmojiCategory({ categoryConfig, children, hidden, hiddenOnSearch, height, }: Props): JSX.Element;
 export {};

package/dist/components/context/ElementRefContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { NullableElement } from '../../DomUtils/selectors';
-export declare function ElementRefContextProvider({ children }: {
+export declare function ElementRefContextProvider({ children, }: {
     children: React.ReactNode;
 }): JSX.Element;
 export declare type ElementRef<E extends HTMLElement = HTMLElement> = React.MutableRefObject<E | null>;

package/dist/components/emoji/ClickableEmojiButton.d.ts

@@ -11,5 +11,5 @@ declare type ClickableEmojiButtonProps = Readonly<{
     className?: string;
     style?: React.CSSProperties;
 }>;
-export declare function ClickableEmojiButton({ emojiNames, unified, hidden, hiddenOnSearch, showVariations, hasVariations, children, className, noBackground, style }: ClickableEmojiButtonProps): JSX.Element;
+export declare function ClickableEmojiButton({ emojiNames, unified, hidden, hiddenOnSearch, showVariations, hasVariations, children, className, noBackground, style, }: ClickableEmojiButtonProps): JSX.Element;
 export {};

package/dist/components/emoji/Emoji.d.ts

@@ -10,5 +10,5 @@ declare type ClickableEmojiProps = Readonly<BaseEmojiProps & {
     noBackground?: boolean;
     style?: React.CSSProperties;
 }>;
-export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, className, noBackground, style }: ClickableEmojiProps): JSX.Element;
+export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, className, noBackground, style, }: ClickableEmojiProps): JSX.Element;
 export {};

package/dist/components/emoji/EmojiImg.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { EmojiStyle } from '../../types/exposedTypes';
-export declare function EmojiImg({ emojiName, style, lazyLoad, imgUrl, onError, className }: {
+export declare function EmojiImg({ emojiName, style, lazyLoad, imgUrl, onError, className, }: {
     emojiName: string;
     emojiStyle: EmojiStyle;
     style: React.CSSProperties;

package/dist/components/emoji/ExportedEmoji.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { EmojiStyle } from '../../types/exposedTypes';
 import { GetEmojiUrl } from './BaseEmojiProps';
-export declare function ExportedEmoji({ unified, size, emojiStyle, lazyLoad, getEmojiUrl, emojiUrl }: {
+export declare function ExportedEmoji({ unified, size, emojiStyle, lazyLoad, getEmojiUrl, emojiUrl, }: {
     unified: string;
     emojiStyle?: EmojiStyle;
     size?: number;

package/dist/components/emoji/NativeEmoji.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare function NativeEmoji({ unified, style, className }: {
+export declare function NativeEmoji({ unified, style, className, }: {
     unified: string;
     style: React.CSSProperties;
     className?: string;

package/dist/components/emoji/ViewOnlyEmoji.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { BaseEmojiProps } from './BaseEmojiProps';
-export declare function ViewOnlyEmoji({ emoji, unified, emojiStyle, size, lazyLoad, getEmojiUrl, className }: BaseEmojiProps): JSX.Element | null;
+export declare function ViewOnlyEmoji({ emoji, unified, emojiStyle, size, lazyLoad, getEmojiUrl, className, }: BaseEmojiProps): JSX.Element | null;

package/dist/components/header/SkinTonePicker/BtnSkinToneVariation.d.ts

@@ -7,5 +7,5 @@ declare type Props = {
     skinToneVariation: SkinTones;
     style?: React.CSSProperties;
 };
-export declare function BtnSkinToneVariation({ isOpen, onClick, isActive, skinToneVariation, style }: Props): JSX.Element;
+export declare function BtnSkinToneVariation({ isOpen, onClick, isActive, skinToneVariation, style, }: Props): JSX.Element;
 export {};

package/dist/components/header/SkinTonePicker/SkinTonePicker.d.ts

@@ -3,7 +3,7 @@ declare type Props = {
     direction?: SkinTonePickerDirection;
 };
 export declare function SkinTonePickerMenu(): JSX.Element;
-export declare function SkinTonePicker({ direction }: Props): JSX.Element | null;
+export declare function SkinTonePicker({ direction, }: Props): JSX.Element | null;
 export declare enum SkinTonePickerDirection {
     VERTICAL = "epr-vertical",
     HORIZONTAL = "epr-horizontal"

package/dist/components/navigation/CategoryButton.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { CategoryConfig } from '../../types/exposedTypes';
 declare type Props = {
     isActiveCategory: boolean;
@@ -6,6 +6,7 @@ declare type Props = {
     allowNavigation: boolean;
     onClick: () => void;
     categoryConfig: CategoryConfig;
+    customIcon?: React.ReactNode;
 };
-export declare function CategoryButton({ isActiveCategory, category, allowNavigation, categoryConfig, onClick }: Props): JSX.Element;
+export declare function CategoryButton({ isActiveCategory, category, allowNavigation, categoryConfig, onClick, customIcon, }: Props): JSX.Element;
 export {};

package/dist/config/config.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
-import { EmojiClickData, EmojiData, EmojiStyle, SkinTonePickerLocation, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
+import { CategoryIcons, EmojiClickData, EmojiData, EmojiStyle, SkinTonePickerLocation, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
 import { CategoriesConfig } from './categoryConfig';
 import { CustomEmoji } from './customEmojiConfig';
 export declare const DEFAULT_SEARCH_PLACEHOLDER = "Search";
@@ -40,6 +40,8 @@ export declare type PickerConfigInternal = {
     allowExpandReactions: boolean;
     hiddenEmojis: string[];
     emojiData?: EmojiData;
+    categoryIcons: CategoryIcons;
+    nonce?: string;
 };
 export declare type PreviewConfig = {
     defaultEmoji: string;

package/dist/config/useConfig.d.ts

@@ -15,6 +15,7 @@ export declare function useSkinTonesDisabledConfig(): boolean;
 export declare function useEmojiStyleConfig(): EmojiStyle;
 export declare function useAutoFocusSearchConfig(): boolean;
 export declare function useCategoriesConfig(): CategoriesConfig;
+export declare function useCategoryIconsConfig(): Partial<Record<import("./categoryConfig").Categories, React.ReactNode>>;
 export declare function useCustomEmojisConfig(): CustomEmoji[];
 export declare function useOpenConfig(): boolean;
 export declare function useOnEmojiClickConfig(mouseEventSource: MOUSE_EVENT_SOURCE): (emoji: EmojiClickData, event: MouseEvent) => void;

package/dist/data/groups.js

@@ -6,6 +6,6 @@ const groups = [
     'activities',
     'objects',
     'symbols',
-    'flags'
+    'flags',
 ];
 export default groups;

package/dist/data/groups.ts

@@ -6,7 +6,7 @@ const groups = [
   'activities',
   'objects',
   'symbols',
-  'flags'
+  'flags',
 ];
 
 export default groups;

package/dist/data/skinToneVariations.js

@@ -5,13 +5,13 @@ const skinToneVariations = [
     SkinTones.MEDIUM_LIGHT,
     SkinTones.MEDIUM,
     SkinTones.MEDIUM_DARK,
-    SkinTones.DARK
+    SkinTones.DARK,
 ];
 export const skinTonesNamed = Object.entries(SkinTones).reduce((acc, [key, value]) => {
     acc[value] = key;
     return acc;
 }, {});
 export const skinTonesMapped = skinToneVariations.reduce((mapped, skinTone) => Object.assign(mapped, {
-    [skinTone]: skinTone
+    [skinTone]: skinTone,
 }), {});
 export default skinToneVariations;

package/dist/data/skinToneVariations.ts

@@ -6,7 +6,7 @@ const skinToneVariations = [
   SkinTones.MEDIUM_LIGHT,
   SkinTones.MEDIUM,
   SkinTones.MEDIUM_DARK,
-  SkinTones.DARK
+  SkinTones.DARK,
 ];
 
 export const skinTonesNamed = Object.entries(SkinTones).reduce(
@@ -14,18 +14,16 @@ export const skinTonesNamed = Object.entries(SkinTones).reduce(
     acc[value] = key;
     return acc;
   },
-  {} as Record<string, string>
+  {} as Record<string, string>,
 );
 
-export const skinTonesMapped: Record<
-  string,
-  string
-> = skinToneVariations.reduce(
-  (mapped, skinTone) =>
-    Object.assign(mapped, {
-      [skinTone]: skinTone
-    }),
-  {}
-);
+export const skinTonesMapped: Record<string, string> =
+  skinToneVariations.reduce(
+    (mapped, skinTone) =>
+      Object.assign(mapped, {
+        [skinTone]: skinTone,
+      }),
+    {},
+  );
 
 export default skinToneVariations;