emoji-picker-react 4.2.0 → 4.3.0

package/README.md

@@ -43,22 +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.                                                                                |
-| getEmojiUrl         | `Function` | -          | Allows to customize the emoji url and provide your own image host.                                                |
+| 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
 
@@ -141,12 +141,12 @@ import { SkinTones } from 'emoji-picker-react';
   [
     {
       category: 'suggested',
-      name: 'Recently Used',
+      name: 'Recently Used'
     },
     {
       category: 'smileys_people',
-      name: 'Faces...',
-    },
+      name: 'Faces...'
+    }
   ];
   ```
 
@@ -171,12 +171,16 @@ import { SkinTones } from 'emoji-picker-react';
 
 ## 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.

package/dist/config/config.d.ts

@@ -16,8 +16,8 @@ export declare type PickerConfigInternal = {
     suggestedEmojisMode: SuggestionMode;
     lazyLoadEmojis: boolean;
     previewConfig: PreviewConfig;
-    height: number;
-    width: number;
+    height: PickerDimensions;
+    width: PickerDimensions;
     getEmojiUrl: GetEmojiUrl;
 };
 export declare type PreviewConfig = {
@@ -29,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,8 +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/emoji-picker-react.cjs.development.js

@@ -16901,8 +16901,8 @@ function usePickerSizeConfig() {
       width = _usePickerConfig12.width;
 
   return {
-    height: height,
-    width: width
+    height: getDimension(height),
+    width: getDimension(width)
   };
 }
 function useEmojiVersionConfig() {
@@ -16918,6 +16918,10 @@ function useGetEmojiUrlConfig() {
   return getEmojiUrl;
 }
 
+function getDimension(dimensionConfig) {
+  return typeof dimensionConfig === 'number' ? dimensionConfig + "px" : dimensionConfig;
+}
+
 var alphaNumericEmojiIndex = {};
 setTimeout(function () {
   allEmojis.reduce(function (searchIndex, emoji) {
@@ -19392,8 +19396,8 @@ function PickerRootElement(_ref2) {
   useKeyboardNavigation();
   useOnFocus();
   var style = {
-    height: height + "px",
-    width: width + "px"
+    height: height,
+    width: width
   };
   return React.createElement("aside", {
     className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === exports.Theme.DARK, _clsx)),