custom Emojis

package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "emoji-picker-react": "^4.5.8",
+    "emoji-picker-react": "^4.5.9",
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18"

src/components/PickerControls.tsx

@@ -6,6 +6,8 @@ import {
   SuggestionMode,
   Theme,
 } from "emoji-picker-react";
+import * as React from "react";
+import { customEmojis } from "./customEmojis";
 
 export function PickerControls({
   pickerProps,
@@ -67,6 +69,11 @@ export function PickerControls({
           updateState("skinTonePickerLocation", skinTonePickerLocation)
         }
       />
+      <ChkCustomEmojis
+        setCustomEmojis={(customEmojis) =>
+          updateState("customEmojis", customEmojis)
+        }
+      />
       <button onClick={reset} className={styles.ButtonReset}>
         Reset
       </button>
@@ -125,6 +132,34 @@ function ChkSearchDisabled({
   );
 }
 
+function ChkCustomEmojis({
+  setCustomEmojis,
+}: {
+  setCustomEmojis: (
+    toggleCustomEmojis: {
+      names: string[];
+      imgUrl: string;
+      id: string;
+    }[]
+  ) => void;
+}) {
+  const [toggleCustomEmojis, setToggleCustomEmojis] = React.useState(false);
+
+  React.useEffect(() => {
+    setCustomEmojis(toggleCustomEmojis ? customEmojis : []);
+  }, [toggleCustomEmojis]);
+
+  return (
+    <Label text="Custom Emojis">
+      <input
+        type="checkbox"
+        checked={toggleCustomEmojis}
+        onChange={(e) => setToggleCustomEmojis(e.target.checked)}
+      />
+    </Label>
+  );
+}
+
 function InputSearchPlaceholder({
   searchPlaceholder,
   setSearchPlaceholder,

src/components/customEmojis.ts

@@ -0,0 +1,68 @@
+export const customEmojis = [
+  {
+    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: ["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: ["Vest"],
+    imgUrl:
+      "https://cdn.jsdelivr.net/gh/ealush/emoji-picker-react@custom_emojis_assets/vest.png",
+    id: "vest",
+  },
+];