emoji-picker-react 4.16.0 → 4.17.0

package/README.md

@@ -57,40 +57,101 @@ function App() {
 - Native Emoji support
 - Emoji Component To Render Emojis in your app
 - Reactions Picker
+- Internationalization / Language Support (via )
+
+## Internationalization / Localization
+
+The emoji picker supports multiple languages (originally via `emojibase-data`). Import the desired language file and pass it to the `EmojiPicker` component via the `emojiData` prop to translate category names and other UI elements.
+
+**Keywords**: translation, localization, internationalization, languages, i18n, l10n.
+
+### Supported Languages
+
+We support a wide range of languages. All data files are available in `dist/data` in the following formats:
+
+- **JS (ESM)**: `emojis-en.js` (Export default object)
+- **JSON**: `emojis-en.json`
+- **TypeScript**: `emojis-en.ts`
+
+**Available Files:**
+
+- `emojis-bn` (Bengali)
+- `emojis-da` (Danish)
+- `emojis-de` (German)
+- `emojis-en-gb` (English, Great Britain)
+- `emojis-en` (English)
+- `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)
+
+### Usage
+
+1. Import the emoji data for your language (e.g., Spanish):
+
+```javascript
+import EmojiPicker from 'emoji-picker-react';
+// Import the data file for your language
+import es from 'emoji-picker-react/dist/data/emojis-es';
+
+function App() {
+  return <EmojiPicker emojiData={es} />;
+}
+```
 
 # Props
 
 The following props are accepted by the picker:
 
-| Prop                   | Type                                                   | Default    | Description                                                                                                                                                |
-| ---------------------- | ------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| open                   | boolean                                                | `true`     | Controls whether the picker is open or not.                                                                                                                |
-| onEmojiClick           | function                                               |            | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter.                                          |
-| autoFocusSearch        | boolean                                                | `true`     | Controls the auto focus of the search input.                                                                                                               |
-| theme                  | string                                                 | `light`    | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`.                                                                          |
-| emojiStyle             | string                                                 | `apple`    | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`.                                                       |
-| defaultSkinTone        | string                                                 | `neutral`  | Controls the default skin tone.                                                                                                                            |
-| lazyLoadEmojis         | boolean                                                | `false`    | Controls whether the emojis are loaded lazily or not.                                                                                                      |
-| previewConfig          | object                                                 | `{}`       | Controls the preview of the emoji. See below for more information.                                                                                         |
-| searchPlaceholder      | string                                                 | `Search`   | Controls the placeholder of the search input.                                                                                                              |
-| suggestedEmojisMode    | string                                                 | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`.                                                                           |
-| skinTonesDisabled      | boolean                                                | `false`    | Controls whether the skin tones are disabled or not.                                                                                                       |
-| searchDisabled         | boolean                                                | `false`    | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component.                                |
-| skinTonePickerLocation | string                                                 | `SEARCH`   | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`.                                                                 |
-| emojiVersion           | string                                                 | -          | Allows displaying emojis up to a certain version for compatibility.                                                                                        |
-| className              | string                                                 | -          | Adds a class name to the root element of the picker.                                                                                                       |
-| width                  | number/string                                          | `350`      | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.                   |
-| height                 | number/string                                          | `450`      | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string.                 |
-| style                  | React.CSSProperties                                    | `{}`       | Adds inline style to the root element of the picker.                                                                                                       |
-| getEmojiUrl            | Function                                               | -          | Allows to customize the emoji url and provide your own image host.                                                                                         |
-| categories             | Array                                                  | -          | Allows full config over ordering, naming and display of categories.                                                                                        |
-| customEmojis           | Array<{names: string[], imgUrl: string, id: string}>   | -          | Allows adding custom emojis to the picker.                                                                                                                 |
-| hiddenEmojis           | string[]                                               | -          | Controls the emojis that are hidden from the picker.                                                                                                       |
-| reactionsDefaultOpen   | boolean                                                | `false`    | Controls whether the reactions picker is on the initial mount instead of the main picker component.                                                        |
-| reactions              | string[]                                               | -          | Controls the reactions to display in the reactions picker. Takes unified emoji ids                                                                         |
-| onReactionClick        | Function                                               | -          | Callback function that is called when a reaction is clicked. The function receives the emoji object as a parameter. If not passed, onEmojiClicked is used. |
-| allowExpandReactions   | boolean                                                | `true`     | Controls whether the reactions picker can be expanded to the main picker.                                                                                  |
-| onSkinToneChange       | Function                                               | -          | Callback function that is called when a skin tone is changed. The function receives new picked skin tone as a parameter.                                   |
+| Prop                   | Type                                                 | Default    | Description                                                                                                                                                |
+| ---------------------- | ---------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| open                   | boolean                                              | `true`     | Controls whether the picker is open or not.                                                                                                                |
+| onEmojiClick           | function                                             |            | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter.                                          |
+| autoFocusSearch        | boolean                                              | `true`     | Controls the auto focus of the search input.                                                                                                               |
+| theme                  | string                                               | `light`    | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`.                                                                          |
+| emojiStyle             | string                                               | `apple`    | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`.                                                       |
+| defaultSkinTone        | string                                               | `neutral`  | Controls the default skin tone.                                                                                                                            |
+| lazyLoadEmojis         | boolean                                              | `false`    | Controls whether the emojis are loaded lazily or not.                                                                                                      |
+| previewConfig          | object                                               | `{}`       | Controls the preview of the emoji. See below for more information.                                                                                         |
+| searchPlaceholder      | string                                               | `Search`   | Controls the placeholder of the search input.                                                                                                              |
+| searchClearButtonLabel | string                                               | 'Clear'    | Controls the `aria-label` and `title` of the Clear button of the search input.                                                                             |
+| suggestedEmojisMode    | string                                               | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`.                                                                           |
+| skinTonesDisabled      | boolean                                              | `false`    | Controls whether the skin tones are disabled or not.                                                                                                       |
+| searchDisabled         | boolean                                              | `false`    | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component.                                |
+| skinTonePickerLocation | string                                               | `SEARCH`   | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`.                                                                 |
+| emojiVersion           | string                                               | -          | Allows displaying emojis up to a certain version for compatibility.                                                                                        |
+| className              | string                                               | -          | Adds a class name to the root element of the picker.                                                                                                       |
+| width                  | number/string                                        | `350`      | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.                   |
+| height                 | number/string                                        | `450`      | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string.                 |
+| style                  | React.CSSProperties                                  | `{}`       | Adds inline style to the root element of the picker.                                                                                                       |
+| getEmojiUrl            | Function                                             | -          | Allows to customize the emoji url and provide your own image host.                                                                                         |
+| categories             | Array                                                | -          | Allows full config over ordering, naming and display of categories.                                                                                        |
+| customEmojis           | Array<{names: string[], imgUrl: string, id: string}> | -          | Allows adding custom emojis to the picker.                                                                                                                 |
+| hiddenEmojis           | string[]                                             | -          | Controls the emojis that are hidden from the picker.                                                                                                       |
+| reactionsDefaultOpen   | boolean                                              | `false`    | Controls whether the reactions picker is on the initial mount instead of the main picker component.                                                        |
+| reactions              | string[]                                             | -          | Controls the reactions to display in the reactions picker. Takes unified emoji ids                                                                         |
+| onReactionClick        | Function                                             | -          | Callback function that is called when a reaction is clicked. The function receives the emoji object as a parameter. If not passed, onEmojiClicked is used. |
+| allowExpandReactions   | boolean                                              | `true`     | Controls whether the reactions picker can be expanded to the main picker.                                                                                  |
+| onSkinToneChange       | Function                                             | -          | Callback function that is called when a skin tone is changed. The function receives new picked skin tone as a parameter.                                   |
+| emojiData              | object                                               | -          | Allows passing a language-specific emoji data object imported from `emoji-picker-react/dist/data/emojis-<lang>`.                                           |
 
 ## Full details
 
@@ -128,7 +189,6 @@ The following props are accepted by the picker:
 - `lazyLoadEmojis`: `boolean` - Whether to lazy load the emojis. Defaults to `false`.
 
 - `defaultSkinTone`: `SkinTones` - The default skin tone to use when an emoji is clicked. Defaults to `SkinTones.Neutral`. Possible skin tones are:
-
   - ✋ 'neutral'
   - ✋🏻 '1f3fb'
   - ✋🏼 '1f3fc'
@@ -166,9 +226,10 @@ import { SkinTones } from 'emoji-picker-react';
 
 - `searchPlaceholder`: `string` - The placeholder text for the search input. Defaults to `Search`.
 
+- `searchClearButtonLabel`: `string` - The `aria-label` and `title` text for the search input clear button. Defaults to `Clear`.
+
 - categories: Allows full config over ordering, naming and display of categories.
   To only sort/omit categories, you can simply pass an array of category names to display:
-
   - 'suggested',
   - 'custom', - Hidden by default
   - 'smileys_people',
@@ -186,12 +247,12 @@ import { SkinTones } from 'emoji-picker-react';
   [
     {
       category: 'suggested',
-      name: 'Recently Used'
+      name: 'Recently Used',
     },
     {
       category: 'smileys_people',
-      name: 'Faces...'
-    }
+      name: 'Faces...',
+    },
   ];
   ```
 
@@ -203,7 +264,6 @@ import { SkinTones } from 'emoji-picker-react';
   ```
 
 - `emojiVersion`: `string` - Allows displaying emojis up to a certain version for compatibility. The passed version will be parsed as a float and each emoji will be tested against it. Common values are:
-
   - `"0.6"`
   - `"1.0"`
   - `"2.0"`
@@ -240,26 +300,26 @@ For example:
       names: ['Alice', 'alice in wonderland'],
       imgUrl:
         'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/alice.png',
-      id: 'alice'
+      id: 'alice',
     },
     {
       names: ['Dog'],
       imgUrl:
         'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/dog.png',
-      id: 'dog'
+      id: 'dog',
     },
     {
       names: ['Hat'],
       imgUrl:
         'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/hat.png',
-      id: 'hat'
+      id: 'hat',
     },
     {
       names: ['Vest'],
       imgUrl:
         'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/vest.png',
-      id: 'vest'
-    }
+      id: 'vest',
+    },
   ]}
 />
 ```
@@ -364,7 +424,7 @@ const Picker = dynamic(
   () => {
     return import('emoji-picker-react');
   },
-  { ssr: false }
+  { ssr: false },
 );
 ```
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CategoryConfig } from '../../config/categoryConfig';
+import { CategoryConfig } from '../../types/exposedTypes';
 declare type Props = Readonly<{
     categoryConfig: CategoryConfig;
     children?: React.ReactNode;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { DataEmoji, DataEmojis } from '../../dataUtils/DataTypes';
+import { Categories, EmojiData, SkinTones } from '../../types/exposedTypes';
+export interface PickerDataContextValue {
+    emojiData: EmojiData;
+    allEmojis: DataEmojis;
+    allEmojisByUnified: Record<string, DataEmoji>;
+    searchIndex: Record<string, Record<string, DataEmoji>>;
+    emojiByUnified: (unified?: string) => DataEmoji | undefined;
+    activeVariationFromUnified: (unified: string) => SkinTones | null;
+}
+export declare function PickerDataProvider({ children, }: {
+    children: React.ReactNode;
+}): JSX.Element;
+export declare function usePickerDataContext(): PickerDataContextValue;
+export declare function useGetEmojisByCategory(): (category: Categories) => DataEmojis;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CategoryConfig } from '../../config/categoryConfig';
+import { CategoryConfig } from '../../types/exposedTypes';
 declare type Props = {
     isActiveCategory: boolean;
     category: string;

package/dist/config/categoryConfig.d.ts

@@ -1,4 +1,4 @@
-import { Categories, SuggestionMode } from '../types/exposedTypes';
+import { Categories, CategoryConfig, EmojiData, SuggestionMode } from '../types/exposedTypes';
 export { Categories };
 export declare const SuggestedRecent: CategoryConfig;
 export declare type CustomCategoryConfig = {
@@ -9,12 +9,8 @@ export declare function baseCategoriesConfig(modifiers?: Record<Categories, Cate
 export declare function categoryFromCategoryConfig(category: CategoryConfig): Categories;
 export declare function categoryNameFromCategoryConfig(category: CategoryConfig): string;
 export declare type CategoriesConfig = CategoryConfig[];
-export declare type CategoryConfig = {
-    category: Categories;
-    name: string;
-};
 export declare type UserCategoryConfig = Array<Categories | CategoryConfig>;
-export declare function mergeCategoriesConfig(userCategoriesConfig?: UserCategoryConfig, modifiers?: CategoryConfigModifiers): CategoriesConfig;
+export declare function mergeCategoriesConfig(userCategoriesConfig?: UserCategoryConfig, modifiers?: CategoryConfigModifiers, emojiData?: EmojiData): CategoriesConfig;
 declare type CategoryConfigModifiers = {
     suggestionMode?: SuggestionMode;
 };

package/dist/config/config.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
-import { EmojiClickData, EmojiStyle, SkinTonePickerLocation, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
+import { 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";
+export declare const DEFAULT_SEARCH_CLEAR_BUTTON_LABEL = "Clear";
 export declare const SEARCH_RESULTS_NO_RESULTS_FOUND = "No results found";
 export declare const SEARCH_RESULTS_SUFFIX = " found. Use up and down arrow keys to navigate.";
 export declare const SEARCH_RESULTS_ONE_RESULT_FOUND: string;
@@ -14,6 +15,7 @@ export declare type PickerConfigInternal = {
     emojiVersion: string | null;
     searchPlaceHolder: string;
     searchPlaceholder: string;
+    searchClearButtonLabel: string;
     defaultSkinTone: SkinTones;
     skinTonesDisabled: boolean;
     autoFocusSearch: boolean;
@@ -37,6 +39,7 @@ export declare type PickerConfigInternal = {
     open: boolean;
     allowExpandReactions: boolean;
     hiddenEmojis: string[];
+    emojiData?: EmojiData;
 };
 export declare type PreviewConfig = {
     defaultEmoji: string;

package/dist/config/useConfig.d.ts

@@ -8,6 +8,7 @@ export declare enum MOUSE_EVENT_SOURCE {
     PICKER = "picker"
 }
 export declare function useSearchPlaceHolderConfig(): string;
+export declare function useSearchClearButtonLabelConfig(): string;
 export declare function useDefaultSkinToneConfig(): SkinTones;
 export declare function useAllowExpandReactions(): boolean;
 export declare function useSkinTonesDisabledConfig(): boolean;

package/dist/data/emojis-bn.d.ts

@@ -0,0 +1,3 @@
+import { EmojiData } from '../types/exposedTypes';
+declare const data: EmojiData;
+export default data;