emoji-picker-react 4.1.1 → 4.3.0

package/README.md

@@ -43,21 +43,22 @@ function App() {
 
 The following props are accepted by them picker:
 
-| Prop                | Type     | Default    | Description                                                                                                       |
-| ------------------- | -------- | ---------- | ----------------------------------------------------------------------------------------------------------------- |
-| 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.                                                              |
-| `width`             | number   | `350`      | Controls the width of the picker.                                                                                 |
-| emojiVersion        | `string` | -          | Allows displaying emojis up to a certain version for compatibility.                                               |
-| `height`            | number   | `450`      | Controls the height of the picker.                                                                                |
+| Prop                | Type              | Default    | Description                                                                                                                                |
+| ------------------- | ----------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| 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.                                                                                       |
+| `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.   |
+| emojiVersion        | `string`          | -          | Allows displaying emojis up to a certain version for compatibility.                                                                        |
+| `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. |
+| getEmojiUrl         | `Function`        | -          | Allows to customize the emoji url and provide your own image host.                                                                         |
 
 ## Full details
 
@@ -140,12 +141,12 @@ import { SkinTones } from 'emoji-picker-react';
   [
     {
       category: 'suggested',
-      name: 'Recently Used',
+      name: 'Recently Used'
     },
     {
       category: 'smileys_people',
-      name: 'Faces...',
-    },
+      name: 'Faces...'
+    }
   ];
   ```
 
@@ -164,16 +165,22 @@ import { SkinTones } from 'emoji-picker-react';
   - `"4.0"`
   - `"5.0"`
 
+* `getEmojiUrl`: `(unified: string, emojiStyle: EmojiStyle) => string` - Allows to customize the emoji url and provide your own image host. The function receives the emoji unified and the emoji style as parameters. The function should return the url of the emoji image.
+
 # Customization
 
 ## Custom Picker Width and Height
 
-To customize the dimensions of the picker, use the `height` and `width` props:
+To customize the dimensions of the picker, use the `height` and `width` props. You can pass in a number that will be treated as pixel size, or your any accepted css width/height as string.
 
 ```jsx
 <EmojiPicker height={500} width={400} />
 ```
 
+```jsx
+<EmojiPicker height="100%" width="15em" />
+```
+
 ## CSS Variables
 
 The picker can be customized via css variables. The root selector for the picker is `.EmojiPickerReact`, when overriding, make sure to provide a more specific selector.
@@ -195,12 +202,13 @@ The picker exports an `Emoji` component. The emoji component is the same used wi
 
 ## Props
 
-| Name         | Type         | Default            | Description                                                                                 |
-| ------------ | ------------ | ------------------ | ------------------------------------------------------------------------------------------- |
-| `unified`    | string       | ""                 | The unified code of the emoji.                                                              |
-| `size`       | number       | 32                 | The size of the emoji.                                                                      |
-| `emojiStyle` | `EmojiStyle` | `EmojiStyle.APPLE` | The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. |
-| `lazyLoad`   | boolean      | `false`            | Whether to lazy load the emoji. image                                                       |
+| Name          | Type         | Default            | Description                                                                                 |
+| ------------- | ------------ | ------------------ | ------------------------------------------------------------------------------------------- |
+| `unified`     | string       | ""                 | The unified code of the emoji.                                                              |
+| `size`        | number       | 32                 | The size of the emoji.                                                                      |
+| `emojiStyle`  | `EmojiStyle` | `EmojiStyle.APPLE` | The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. |
+| `lazyLoad`    | boolean      | `false`            | Whether to lazy load the emoji. image                                                       |
+| `getEmojiUrl` | Function     | -                  | Allows to customize the emoji url and provide your own image host.                          |
 
 ```js
 import { Emoji, EmojiStyle } from 'emoji-picker-react';

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

@@ -14,7 +14,9 @@ declare type BaseProps = {
     unified: string;
     size?: number;
     lazyLoad?: boolean;
+    getEmojiUrl?: GetEmojiUrl;
 };
-export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad }: ClickableEmojiProps): JSX.Element;
-export declare function ViewOnlyEmoji({ emoji, unified, emojiStyle, size, lazyLoad }: BaseProps): JSX.Element;
+export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, }: ClickableEmojiProps): JSX.Element;
+export declare function ViewOnlyEmoji({ emoji, unified, emojiStyle, size, lazyLoad, getEmojiUrl, }: BaseProps): JSX.Element;
+export declare type GetEmojiUrl = (unified: string, style: EmojiStyle) => string;
 export {};

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { EmojiStyle } from '../../types/exposedTypes';
-export declare function ExportedEmoji({ unified, size, emojiStyle, lazyLoad }: {
+import { GetEmojiUrl } from './Emoji';
+export declare function ExportedEmoji({ unified, size, emojiStyle, lazyLoad, getEmojiUrl, }: {
     unified: string;
     emojiStyle?: EmojiStyle;
     size?: number;
     lazyLoad?: boolean;
+    getEmojiUrl?: GetEmojiUrl;
 }): JSX.Element | null;

package/dist/config/cdnUrls.d.ts

@@ -1,2 +1,2 @@
-import { EmojiStyle } from "../types/exposedTypes";
+import { EmojiStyle } from '../types/exposedTypes';
 export declare function cdnUrl(emojiStyle: EmojiStyle): string;

package/dist/config/config.d.ts

@@ -1,3 +1,4 @@
+import { GetEmojiUrl } from '../components/emoji/Emoji';
 import { EmojiClickData, EmojiStyle, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
 import { CategoriesConfig } from './categoryConfig';
 export declare function mergeConfig(userConfig?: PickerConfig): PickerConfigInternal;
@@ -15,8 +16,9 @@ export declare type PickerConfigInternal = {
     suggestedEmojisMode: SuggestionMode;
     lazyLoadEmojis: boolean;
     previewConfig: PreviewConfig;
-    height: number;
-    width: number;
+    height: PickerDimensions;
+    width: PickerDimensions;
+    getEmojiUrl: GetEmojiUrl;
 };
 export declare type PreviewConfig = {
     defaultEmoji: string;
@@ -27,4 +29,5 @@ declare type ConfigExternal = {
     previewConfig: Partial<PreviewConfig>;
 } & Omit<PickerConfigInternal, 'previewConfig'>;
 export declare type PickerConfig = Partial<ConfigExternal>;
+export declare type PickerDimensions = string | number;
 export {};

package/dist/config/useConfig.d.ts

@@ -1,6 +1,6 @@
 import { EmojiClickData, EmojiStyle, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
 import { CategoriesConfig } from './categoryConfig';
-import { PreviewConfig } from './config';
+import { PickerDimensions, PreviewConfig } from './config';
 export declare function useSearchPlaceHolderConfig(): string;
 export declare function useDefaultSkinToneConfig(): SkinTones;
 export declare function useSkinTonesDisabledConfig(): boolean;
@@ -13,7 +13,8 @@ export declare function useThemeConfig(): Theme;
 export declare function useSuggestedEmojisModeConfig(): SuggestionMode;
 export declare function useLazyLoadEmojisConfig(): boolean;
 export declare function usePickerSizeConfig(): {
-    height: number;
-    width: number;
+    height: PickerDimensions;
+    width: PickerDimensions;
 };
 export declare function useEmojiVersionConfig(): string | null;
+export declare function useGetEmojiUrlConfig(): (unified: string, style: EmojiStyle) => string;

package/dist/dataUtils/emojiSelectors.d.ts

@@ -5,10 +5,9 @@ export declare function emojiNames(emoji: DataEmoji): string[];
 export declare function addedIn(emoji: DataEmoji): number;
 export declare function emojiName(emoji: DataEmoji): string;
 export declare function unifiedWithoutSkinTone(unified: string): string;
-export declare function emojiUrl(emojiStyle: EmojiStyle, emoji: DataEmoji, skinTone?: string): string;
 export declare function emojiUnified(emoji: DataEmoji, skinTone?: string): string;
 export declare function emojisByCategory(category: Categories): DataEmojis;
-export declare function emojiUrlByUnified(emojiStyle: EmojiStyle, unified: string): string;
+export declare function emojiUrlByUnified(unified: string, emojiStyle: EmojiStyle): string;
 export declare function emojiVariations(emoji: DataEmoji): string[];
 export declare function emojiHasVariations(emoji: DataEmoji): boolean;
 export declare function emojiVariationUnified(emoji: DataEmoji, skinTone?: string): string | undefined;