emoji-picker-react 4.5.0 → 4.5.1

package/README.md

@@ -36,6 +36,7 @@ function App() {
 ## Features
 
 - Custom click handler
+- Custom Emojis Support
 - Dark mode
 - Customizable styles via css variables
 - Default skin tone selection
@@ -78,9 +79,11 @@ The following props are accepted by them picker:
     activeSkinTone: SkinTones;
     unified: string;
     unifiedWithoutSkinTone: string;
-    emoji: string;
+    emoji: string; // the emoji character, for example: '😀'. Emoji ID in custom emojis
+    isCustom: boolean; // whether the emoji is a custom emoji or not
     names: string[];
-    getImageUrl: (emojiStyle: EmojiStyle) => string;
+    imageUrl: string; // the url of the emoji image with the current emoji style applied
+    getImageUrl: (emojiStyle: EmojiStyle) => string; // a function that receives an emoji style and returns the url of the emoji image with the provided style applied
   }
   ```
 
@@ -199,20 +202,70 @@ imgUrl: URL for the emoji image
 <Picker
   customEmojis={[
     {
-      names: ['Film'],
-      imgUrl: 'https://cdn.jsdelivr.net/npm/eva-icons/fill/svg/film.svg',
-      id: 'film'
+      names: ['Alice', 'alice in wonderland'],
+      imgUrl:
+        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/alice.png',
+      id: 'alice'
+    },
+    {
+      names: ['Dog'],
+      imgUrl:
+        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/dog.png',
+      id: 'dog'
+    },
+    {
+      names: ['Hat'],
+      imgUrl:
+        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/hat.png',
+      id: 'hat'
+    },
+    {
+      names: ['Kid'],
+      imgUrl:
+        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/kid.png',
+      id: 'kid'
+    },
+    {
+      names: ['Mic'],
+      imgUrl:
+        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/mic.png',
+      id: 'mic'
     },
     {
-      names: ['Bar Chart'],
-      imgUrl: 'https://cdn.jsdelivr.net/npm/eva-icons/fill/svg/bar-chart.svg',
-      id: 'bar_chart'
+      names: ['Moab', 'desert'],
+      imgUrl:
+        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/moab.png',
+      id: 'moab'
+    },
+    {
+      names: ['Potter', 'harry', 'harry potter'],
+      imgUrl:
+        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/potter.png',
+      id: 'potter'
+    },
+    {
+      names: ['Shroom', 'mushroom'],
+      imgUrl:
+        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/shroom.png',
+      id: 'shroom'
+    },
+    {
+      names: ['Smily'],
+      imgUrl:
+        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/smily.png',
+      id: 'smily'
+    },
+    {
+      names: ['Tabby', 'cat'],
+      imgUrl:
+        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/tabby.png',
+      id: 'tabby'
     },
     {
-      names: ['champagne', 'bottle', 'sparkling wine'],
+      names: ['Vest'],
       imgUrl:
-        'https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji/src/food-drink/drink/1F37E.svg',
-      id: 'champagne'
+        'https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/vest.png',
+      id: 'vest'
     }
   ]}
 />
@@ -265,7 +318,8 @@ The picker exports an `Emoji` component. The emoji component is the same used wi
 | `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.                          |
+| `emojiUrl`    | string       | -                  | The url of the emoji image to render. Useful for custom emojis.                             |
+| `getEmojiUrl` | Function     | -                  | Allows to customize the emoji url and provide your own image host for dynamic resolution.   |
 
 ```js
 import { Emoji, EmojiStyle } from 'emoji-picker-react';

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

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

package/dist/emoji-picker-react.cjs.development.js

@@ -17703,6 +17703,13 @@ function setSuggested(emoji, skinTone) {
   }
 }
 
+function isCustomCategory(category) {
+  return category.category === exports.Categories.CUSTOM;
+}
+function isCustomEmoji(emoji) {
+  return emoji.imgUrl !== undefined;
+}
+
 function useCloseAllOpenToggles() {
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
       variationPicker = _useEmojiVariationPic[0],
@@ -17771,6 +17778,7 @@ function useMouseDownHandlers(BodyRef) {
       updateSuggested = _useUpdateSuggested[1];
 
   var getEmojiUrl = useGetEmojiUrlConfig();
+  var activeEmojiStyle = useEmojiStyleConfig();
   var onClick = React.useCallback(function onClick(event) {
     if (disallowClickRef.current) {
       return;
@@ -17789,8 +17797,8 @@ function useMouseDownHandlers(BodyRef) {
     var skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
     updateSuggested();
     setSuggested(emoji, skinToneToUse);
-    onEmojiClick(emojiClickOutput(emoji, skinToneToUse, getEmojiUrl), event);
-  }, [activeSkinTone, closeAllOpenToggles, disallowClickRef, onEmojiClick, updateSuggested, getEmojiUrl]);
+    onEmojiClick(emojiClickOutput(emoji, skinToneToUse, activeEmojiStyle, getEmojiUrl), event);
+  }, [activeSkinTone, closeAllOpenToggles, disallowClickRef, onEmojiClick, updateSuggested, getEmojiUrl, activeEmojiStyle]);
   var onMouseDown = React.useCallback(function onMouseDown(event) {
     var _window;
 
@@ -17861,15 +17869,40 @@ function emojiFromEvent(event) {
   return emojiFromElement(target);
 }
 
-function emojiClickOutput(emoji, activeSkinTone, getEmojiUrl) {
+function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl) {
+  var names = emojiNames(emoji);
+
+  if (isCustomEmoji(emoji)) {
+    var _unified = emojiUnified(emoji);
+
+    return {
+      activeSkinTone: activeSkinTone,
+      emoji: _unified,
+      getImageUrl: function getImageUrl() {
+        return emoji.imgUrl;
+      },
+      imageUrl: emoji.imgUrl,
+      isCustom: true,
+      names: names,
+      unified: _unified,
+      unifiedWithoutSkinTone: _unified
+    };
+  }
+
   var unified = emojiUnified(emoji, activeSkinTone);
   return {
     activeSkinTone: activeSkinTone,
     emoji: parseNativeEmoji(unified),
     getImageUrl: function getImageUrl(emojiStyle) {
+      if (emojiStyle === void 0) {
+        emojiStyle = activeEmojiStyle != null ? activeEmojiStyle : exports.EmojiStyle.APPLE;
+      }
+
       return getEmojiUrl(unified, emojiStyle);
     },
-    names: emojiNames(emoji),
+    imageUrl: getEmojiUrl(unified, activeEmojiStyle != null ? activeEmojiStyle : exports.EmojiStyle.APPLE),
+    isCustom: false,
+    names: names,
     unified: unified,
     unifiedWithoutSkinTone: emojiUnified(emoji)
   };
@@ -18181,13 +18214,6 @@ function ClickableEmojiButton(_ref) {
   }, children);
 }
 
-function isCustomCategory(category) {
-  return category.category === exports.Categories.CUSTOM;
-}
-function isCustomEmoji(emoji) {
-  return emoji.imgUrl !== undefined;
-}
-
 function EmojiImg(_ref) {
   var emojiName = _ref.emojiName,
       style = _ref.style,
@@ -18243,7 +18269,7 @@ function ViewOnlyEmoji(_ref) {
     return React.createElement(EmojiImg, {
       style: style,
       emojiName: unified,
-      emojiStyle: emojiStyle,
+      emojiStyle: exports.EmojiStyle.NATIVE,
       lazyLoad: lazyLoad,
       imgUrl: emojiToRender.imgUrl,
       onError: onError
@@ -19745,9 +19771,10 @@ function ExportedEmoji(_ref) {
       emojiStyle = _ref$emojiStyle === void 0 ? exports.EmojiStyle.APPLE : _ref$emojiStyle,
       _ref$lazyLoad = _ref.lazyLoad,
       lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
-      getEmojiUrl = _ref.getEmojiUrl;
+      getEmojiUrl = _ref.getEmojiUrl,
+      emojiUrl = _ref.emojiUrl;
 
-  if (!unified) {
+  if (!unified && !emojiUrl && !getEmojiUrl) {
     return null;
   }
 
@@ -19756,7 +19783,9 @@ function ExportedEmoji(_ref) {
     size: size,
     emojiStyle: emojiStyle,
     lazyLoad: lazyLoad,
-    getEmojiUrl: getEmojiUrl
+    getEmojiUrl: emojiUrl ? function () {
+      return emojiUrl;
+    } : getEmojiUrl
   });
 }