Support emojis added after initial mount

package.json

@@ -1,5 +1,5 @@
 {
- "version": "4.5.8",
+ "version": "4.5.9",
  "license": "MIT",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",

src/EmojiPickerReact.tsx

@@ -26,6 +26,8 @@ function EmojiPicker(props: PickerProps) {
 
 // eslint-disable-next-line complexity
 export default React.memo(EmojiPicker, (prev, next) => {
+ const prevCustomEmojis = prev.customEmojis ?? [];
+ const nextCustomEmojis = next.customEmojis ?? [];
  return (
  prev.emojiVersion === next.emojiVersion &&
  prev.searchPlaceHolder === next.searchPlaceHolder &&
@@ -40,6 +42,7 @@ export default React.memo(EmojiPicker, (prev, next) => {
  prev.height === next.height &&
  prev.width === next.width &&
  prev.searchDisabled === next.searchDisabled &&
- prev.skinTonePickerLocation === next.skinTonePickerLocation
+ prev.skinTonePickerLocation === next.skinTonePickerLocation &&
+ prevCustomEmojis.length === nextCustomEmojis.length
  );
 });

src/components/context/PickerConfigContext.tsx

@@ -17,14 +17,31 @@ const ConfigContext = React.createContext<PickerConfigInternal>(
 );
 
 export function PickerConfigProvider({ children, ...config }: Props) {
- const [mergedConfig] = React.useState(() => mergeConfig(config));
+ const mergedConfig = useSetConfig(config);
+
  return (
  <ConfigContext.Provider value={mergedConfig}>
  {children}
  </ConfigContext.Provider>
  );
 }
 
+export function useSetConfig(config: PickerConfig) {
+ const [mergedConfig, setMergedConfig] = React.useState(() =>
+ mergeConfig(config)
+ );
+
+ React.useEffect(() => {
+ if (config.customEmojis?.length !== mergedConfig.customEmojis?.length) {
+ setMergedConfig(mergeConfig(config));
+ }
+ // not gonna...
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [config.customEmojis?.length]);
+
+ return mergedConfig;
+}
+
 export function usePickerConfig() {
  return React.useContext(ConfigContext);
 }

stories/picker.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import EmojiPicker, {
  Emoji,
@@ -44,9 +44,21 @@ export const AutoTheme = (args: Props) => (
 );
 
 export const CustomEmojis = (args: Props) => (
- <Template {...args} customEmojis={ customEmojis} />
+ <Template {...args} customEmojis={customEmojis} />
 );
 
+export const CustomEmojisDeffered = (args: Props) => {
+ const [custom, setCustomEmojis] = useState<any>(undefined);
+
+ useEffect(() => {
+ setTimeout(() => {
+ setCustomEmojis(customEmojis);
+ }, 2000);
+ }, []);
+
+ return <Template {...args} customEmojis={custom} />;
+};
+
 export const SearchDisabled = (args: Props) => (
  <Template {...args} searchDisabled />
 );