emoji-picker-react 5.1.0 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -10,7 +10,7 @@ One emoji-picker engine, with two ways to build your UI: use the complete picker
10
10
 
11
11
  [![npm downloads](https://img.shields.io/npm/dm/emoji-picker-react.svg)](https://www.npmjs.com/package/emoji-picker-react)
12
12
 
13
- **[Live demo](https://ealush.com/emoji-picker-react)** · **[Quick start](#quick-start)** · **[Props](PROPS.md)** · **[BYOD](#byod-bring-your-own-design)** · **[Common tasks](#common-tasks)** · **[For AI assistants](#for-ai-assistants)** · **[Report a bug](https://github.com/ealush/emoji-picker-react/issues)** · **[Sponsor](https://github.com/sponsors/ealush)**
13
+ **[Live demo](https://ealush.com/emoji-picker-react)** · **[Quick start](#quick-start)** · **[Props](PROPS.md)** · **[Compare pickers](#compare-emoji-pickers)** · **[BYOD](#byod-bring-your-own-design)** · **[Common tasks](#common-tasks)** · **[For AI assistants](#for-ai-assistants)** · **[Report a bug](https://github.com/ealush/emoji-picker-react/issues)** · **[Sponsor](https://github.com/sponsors/ealush)**
14
14
 
15
15
  ![image](https://github.com/ealush/emoji-picker-react/assets/11255103/48901306-e7fd-49cd-8f1e-9b214083a61d)
16
16
 
@@ -71,6 +71,34 @@ See [PROPS.md](PROPS.md) for every prop.
71
71
 
72
72
  > **Upgrading from v4?** Most code works unchanged; the default emoji style is now native, and markup, styling and package boundaries have changed. See [Migrating from v4](docs/v5/MIGRATION.md). The APIs on this page need `emoji-picker-react@5` or later.
73
73
 
74
+ ## Compare emoji pickers
75
+
76
+ v5 supports both a complete styled picker and unstyled React composition,
77
+ with custom image emoji, recents, category navigation and reactions built in.
78
+
79
+ | Capability | emoji-picker-react v5 | Emoji Mart + React wrapper | Frimousse | emoji-picker-element |
80
+ | --- | --- | --- | --- | --- |
81
+ | Complete styled picker | Built in | Built in | Compose/style parts or use shadcn starter | Built in |
82
+ | Unstyled React primitives | Built in | No React primitives API | Built in | Web component |
83
+ | Keyboard navigation, search and skin tones | Built in | Built in | Built in | Built in |
84
+ | Localized search and UI | Built in | Built in | Built in | Built in |
85
+ | Native glyph support filtering | Built in | Built in | Built in for default data resolver | Built in |
86
+ | Custom image emoji and named groups | Built in | Built in | Custom data and cell rendering | Built in |
87
+ | Recent/frequent emoji | Built in | Built in | App-owned | Built-in favorites |
88
+ | Category navigation controls | Built in | Built in | App-owned | Built in |
89
+ | Compact reactions bar with expansion | Built in | App-owned | App-owned | App-owned |
90
+ | Standalone emoji search API | Framework-free `/data` entry | `SearchIndex` | Metadata lookup only | Browser `Database` API |
91
+ | Persistent dataset cache | Remote cache policy is app-owned | Remote cache policy is app-owned | Built-in localStorage cache | Built-in IndexedDB cache |
92
+
93
+ “App-owned” means the application implements the feature. Custom renderers and
94
+ data resolvers can extend the supplied behavior. Bundled data in
95
+ emoji-picker-react and Emoji Mart can be used offline without a remote cache.
96
+
97
+ Audited October 20, 2026 against Emoji Mart 5.6.0 / React wrapper 1.1.1,
98
+ Frimousse 0.4.0 and emoji-picker-element 1.29.1. See the
99
+ [full comparison and sources](docs/v5/COMPARISON.md) for API details,
100
+ v5 capabilities, native-detection limits and data-loading APIs.
101
+
74
102
  ## Copyable integration prompts
75
103
 
76
104
  Use the [setup, customization, recipe adoption and v5 migration prompts](docs/v5/PROMPTS.md)
@@ -21,4 +21,3 @@ export declare enum ClassNames {
21
21
  darkTheme = "epr-dark-theme",
22
22
  autoTheme = "epr-auto-theme"
23
23
  }
24
- export declare function asSelectors(...classNames: ClassNames[]): string;
@@ -15,8 +15,12 @@ export type MoveOptions = {
15
15
  exit?: () => boolean | void;
16
16
  /** Receives the destination cell; focuses it by default. */
17
17
  moveTo?: (emoji: HTMLElement) => void;
18
+ /** Source cell while a virtualized destination is being materialized. */
19
+ origin?: HTMLElement;
18
20
  };
21
+ /** Move to the first filtered result, including a cell outside the viewport. */
22
+ export declare function focusFirstEmoji(body: NullableElement, options: MoveOptions): boolean;
19
23
  export declare function focusAdjacentEmoji(element: NullableElement, direction: number, row: boolean, options: MoveOptions): void;
20
24
  /** Cells fully in view: inside the scroll container, below the sticky label. */
21
25
  export declare function emojisInView(body: NullableElement): HTMLElement[];
22
- export declare function focusLogicalEmoji(category: HTMLElement, index: number, { shouldFocus, moveTo }: MoveOptions): void;
26
+ export declare function focusLogicalEmoji(category: HTMLElement, index: number, { shouldFocus, moveTo, origin }: MoveOptions): void;
@@ -1,6 +1,6 @@
1
1
  export type NullableElement = HTMLElement | null;
2
- export declare const EmojiButtonSelector: string;
3
- export declare const VisibleEmojiSelector: string;
2
+ export declare const EmojiButtonSelector = "button.epr-emoji";
3
+ export declare const VisibleEmojiSelector = "button.epr-emoji.epr-visible:not(.epr-hidden)";
4
4
  export declare function buttonFromTarget(emojiElement: NullableElement): HTMLButtonElement | null;
5
5
  export declare function isEmojiButton(element: NullableElement): boolean;
6
6
  export declare function isEmojiElement(element: NullableElement): boolean;
@@ -7,4 +7,4 @@ export declare const DefaultPickerConfiguration: React.Context<Partial<{
7
7
  onSkinToneChange: import("./config").OnSkinToneChange;
8
8
  categories: import("./categoryConfig").UserCategoryConfig;
9
9
  emojiData: import("..").EmojiDataInput;
10
- } & Omit<import("./config").PickerConfigInternal, "categories" | "previewConfig" | "unicodeToHide" | "emojiData">> | null>;
10
+ } & Omit<import("./config").PickerConfigInternal, "categories" | "emojiData" | "previewConfig" | "unicodeToHide">> | null>;