@hokkiai/discord-emoji-selector 1.1.6 → 1.2.0

package/dist/categoryDisplay-AZPE23IJ.js

@@ -0,0 +1,205 @@
+import {
+  render,
+  useSearchValue,
+  useSkin
+} from "./chunk-DMO3WEXH.js";
+
+// src/categoryDisplay.tsx
+import { ChevronDown } from "lucide-react";
+import { memo, useState, useCallback, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Emoji = memo(function Emoji2({
+  pickerId,
+  emoji,
+  onEmojiMouseEnter,
+  onEmojiMouseLeave,
+  onEmojiSelect
+}) {
+  const handleMouseEnter = useCallback(() => {
+    window["emojipicker-" + pickerId].changeFooterEmoji(emoji);
+    window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
+    onEmojiMouseEnter(emoji);
+  }, [pickerId, emoji, onEmojiMouseEnter]);
+  const handleMouseLeave = useCallback(() => {
+    onEmojiMouseLeave(emoji);
+  }, [emoji, onEmojiMouseLeave]);
+  const handleClick = useCallback(() => {
+    onEmojiSelect(emoji);
+  }, [emoji, onEmojiSelect]);
+  const html = useMemo(() => render(emoji.char), [emoji.char]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      className: "HOKKIEMOJIPICKER-emoji text-4xl p-1 cursor-pointer hover:bg-white/15 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+});
+var SkinEmoji = memo(function SkinEmoji2({
+  pickerId,
+  emoji,
+  onEmojiSelect,
+  onEmojiMouseEnter,
+  onEmojiMouseLeave
+}) {
+  const skin = useSkin({ pickerId });
+  const fakeEmoji = useMemo(() => {
+    const charForSkin = [1, 2, 3, 4, 5].includes(skin) ? emoji.tones.find((a) => a.tone.find((b) => b === skin) === skin)?.char : emoji.char;
+    return {
+      ...emoji,
+      char: charForSkin,
+      preRendered: true,
+      tones: [
+        {
+          name: emoji.tones[0].name.replaceAll("1", "0"),
+          tone: [0],
+          char: emoji.char
+        },
+        ...emoji.tones
+      ]
+    };
+  }, [emoji, skin]);
+  const handleMouseEnter = useCallback(() => {
+    window["emojipicker-" + pickerId].changeFooterEmoji(fakeEmoji);
+    window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
+    onEmojiMouseEnter(fakeEmoji);
+  }, [pickerId, fakeEmoji, emoji.name, onEmojiMouseEnter]);
+  const handleMouseLeave = useCallback(() => {
+    onEmojiMouseLeave(fakeEmoji);
+  }, [fakeEmoji, onEmojiMouseLeave]);
+  const handleClick = useCallback(() => {
+    onEmojiSelect(fakeEmoji);
+  }, [fakeEmoji, onEmojiSelect]);
+  const html = useMemo(() => render(fakeEmoji.char), [fakeEmoji.char]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      className: "HOKKIEMOJIPICKER-skinemoji text-4xl p-1 cursor-pointer hover:bg-white/15 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+});
+var CategoryDisplay = memo(function CategoryDisplay2({
+  category,
+  categoryInfo,
+  isToneSelectorEnabled,
+  onEmojiSelect,
+  onEmojiMouseEnter,
+  onEmojiMouseLeave,
+  pickerId
+}) {
+  const storageKey = `hokkiemojipicker-category-${category.name}-open`;
+  const [isOpen, setIsOpen] = useState(() => {
+    const cached = localStorage?.getItem(storageKey);
+    return cached === null ? true : cached === "true";
+  });
+  const searchValue = useSearchValue({ pickerId });
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => {
+      const newState = !prev;
+      try {
+        localStorage?.setItem(storageKey, String(newState));
+      } catch (e) {
+      }
+      return newState;
+    });
+  }, [storageKey]);
+  const searchLower = useMemo(
+    () => (searchValue || "").toLowerCase().replace(/_/g, " "),
+    [searchValue]
+  );
+  const filteredEmojis = useMemo(() => {
+    if (!searchLower) return null;
+    return category.emojis.filter(
+      (emoji) => emoji.name.toLowerCase().replace(/_/g, " ").includes(searchLower)
+    );
+  }, [category.emojis, searchLower]);
+  if (searchLower) {
+    if (category.name === "recentlyUsed")
+      return /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full" });
+    return /* @__PURE__ */ jsx(Fragment, { children: filteredEmojis.map((emoji) => {
+      if (emoji.hasTone && !emoji.preRendered) {
+        return /* @__PURE__ */ jsx(
+          SkinEmoji,
+          {
+            onEmojiSelect,
+            pickerId,
+            onEmojiMouseEnter,
+            onEmojiMouseLeave,
+            emoji
+          },
+          emoji.name
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Emoji,
+        {
+          onEmojiSelect,
+          pickerId,
+          emoji,
+          onEmojiMouseEnter,
+          onEmojiMouseLeave
+        },
+        emoji.name
+      );
+    }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "HOKKIEMOJIPICKER-categorydisplay flex flex-col relative w-full pt-2", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "HOKKIEMOJIPICKER-categoryHeader sticky top-0 pt-2 cursor-pointer text-white px-2 flex bg-[#131416] p-1 pb-2 " + category.name,
+        onClick: handleToggle,
+        children: /* @__PURE__ */ jsxs("span", { className: "flex gap-1.5 items-center opacity-75 hover:opacity-100", children: [
+          /* @__PURE__ */ jsx("span", { className: "*:size-4.5", children: categoryInfo.icon }),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "text-md font-semibold font-gg", children: categoryInfo.name }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              strokeWidth: 2,
+              className: "transition-all size-5 data-[open=false]:-rotate-90",
+              "data-open": isOpen ? "true" : "false"
+            }
+          )
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-y-0.5", children: category.emojis.map((emoji) => {
+      if (emoji.hasTone && !emoji.preRendered && isToneSelectorEnabled) {
+        return /* @__PURE__ */ jsx(
+          SkinEmoji,
+          {
+            onEmojiSelect,
+            pickerId,
+            emoji,
+            onEmojiMouseEnter,
+            onEmojiMouseLeave
+          },
+          emoji.name
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Emoji,
+        {
+          onEmojiSelect,
+          pickerId,
+          onEmojiMouseEnter,
+          onEmojiMouseLeave,
+          emoji
+        },
+        emoji.name
+      );
+    }) })
+  ] });
+});
+var categoryDisplay_default = CategoryDisplay;
+export {
+  categoryDisplay_default as default
+};

package/dist/categoryDisplay-BV7OPJVG.js

@@ -0,0 +1,205 @@
+import {
+  render,
+  useSearchValue,
+  useSkin
+} from "./chunk-DMO3WEXH.js";
+
+// src/categoryDisplay.tsx
+import { ChevronDown } from "lucide-react";
+import { memo, useEffect, useState, useCallback, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Emoji = memo(function Emoji2({
+  pickerId,
+  emoji,
+  onEmojiMouseEnter,
+  onEmojiMouseLeave,
+  onEmojiSelect
+}) {
+  const handleMouseEnter = useCallback(() => {
+    window["emojipicker-" + pickerId].changeFooterEmoji(emoji);
+    window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
+    onEmojiMouseEnter(emoji);
+  }, [pickerId, emoji, onEmojiMouseEnter]);
+  const handleMouseLeave = useCallback(() => {
+    onEmojiMouseLeave(emoji);
+  }, [emoji, onEmojiMouseLeave]);
+  const handleClick = useCallback(() => {
+    onEmojiSelect(emoji);
+  }, [emoji, onEmojiSelect]);
+  const html = useMemo(() => render(emoji.char), [emoji.char]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      className: "HOKKIEMOJIPICKER-emoji text-4xl p-1 cursor-pointer hover:bg-white/15 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+});
+var SkinEmoji = memo(function SkinEmoji2({
+  pickerId,
+  emoji,
+  onEmojiSelect,
+  onEmojiMouseEnter,
+  onEmojiMouseLeave
+}) {
+  const skin = useSkin({ pickerId });
+  const fakeEmoji = useMemo(() => {
+    const charForSkin = [1, 2, 3, 4, 5].includes(skin) ? emoji.tones.find((a) => a.tone.find((b) => b === skin) === skin)?.char : emoji.char;
+    return {
+      ...emoji,
+      char: charForSkin,
+      preRendered: true,
+      tones: [
+        {
+          name: emoji.tones[0].name.replaceAll("1", "0"),
+          tone: [0],
+          char: emoji.char
+        },
+        ...emoji.tones
+      ]
+    };
+  }, [emoji, skin]);
+  const handleMouseEnter = useCallback(() => {
+    window["emojipicker-" + pickerId].changeFooterEmoji(fakeEmoji);
+    window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
+    onEmojiMouseEnter(fakeEmoji);
+  }, [pickerId, fakeEmoji, emoji.name, onEmojiMouseEnter]);
+  const handleMouseLeave = useCallback(() => {
+    onEmojiMouseLeave(fakeEmoji);
+  }, [fakeEmoji, onEmojiMouseLeave]);
+  const handleClick = useCallback(() => {
+    onEmojiSelect(fakeEmoji);
+  }, [fakeEmoji, onEmojiSelect]);
+  const html = useMemo(() => render(fakeEmoji.char), [fakeEmoji.char]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      className: "HOKKIEMOJIPICKER-skinemoji text-4xl p-1 cursor-pointer hover:bg-white/15 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+});
+var CategoryDisplay = memo(function CategoryDisplay2({
+  category,
+  categoryInfo,
+  isToneSelectorEnabled,
+  onEmojiSelect,
+  onEmojiMouseEnter,
+  onEmojiMouseLeave,
+  pickerId
+}) {
+  const [isOpen, setIsOpen] = useState(true);
+  const searchValue = useSearchValue({ pickerId });
+  useEffect(() => {
+    setIsOpen(
+      (localStorage.getItem(
+        "hokkiemojipicker-category-" + category.name + "-open"
+      ) || "true") === "true"
+    );
+  }, [category.name]);
+  const searchLower = useMemo(
+    () => (searchValue || "").toLowerCase().replace(/_/g, " "),
+    [searchValue]
+  );
+  const filteredEmojis = useMemo(() => {
+    if (!searchLower) return null;
+    return category.emojis.filter(
+      (emoji) => emoji.name.toLowerCase().replace(/_/g, " ").includes(searchLower)
+    );
+  }, [category.emojis, searchLower]);
+  if (searchLower) {
+    if (category.name === "recentlyUsed")
+      return /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full" });
+    return /* @__PURE__ */ jsx(Fragment, { children: filteredEmojis.map((emoji) => {
+      if (emoji.hasTone && !emoji.preRendered) {
+        return /* @__PURE__ */ jsx(
+          SkinEmoji,
+          {
+            onEmojiSelect,
+            pickerId,
+            onEmojiMouseEnter,
+            onEmojiMouseLeave,
+            emoji
+          },
+          emoji.name
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Emoji,
+        {
+          onEmojiSelect,
+          pickerId,
+          emoji,
+          onEmojiMouseEnter,
+          onEmojiMouseLeave
+        },
+        emoji.name
+      );
+    }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "HOKKIEMOJIPICKER-categorydisplay flex flex-col relative w-full pt-2", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "HOKKIEMOJIPICKER-categoryHeader sticky top-0 pt-2 cursor-pointer text-white px-2 flex bg-[#131416] p-1 pb-2 " + category.name,
+        onClick: () => {
+          const newOpen = !isOpen;
+          setIsOpen(newOpen);
+          localStorage.setItem(
+            "hokkiemojipicker-category-" + category.name + "-open",
+            newOpen ? "true" : "false"
+          );
+        },
+        children: /* @__PURE__ */ jsxs("span", { className: "flex gap-1.5 items-center opacity-75 hover:opacity-100", children: [
+          /* @__PURE__ */ jsx("span", { className: "*:size-4.5", children: categoryInfo.icon }),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "text-md font-semibold font-gg", children: categoryInfo.name }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              strokeWidth: 2,
+              className: "transition-all size-5 data-[open=false]:-rotate-90",
+              "data-open": isOpen ? "true" : "false"
+            }
+          )
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-y-0.5", children: category.emojis.map((emoji) => {
+      if (emoji.hasTone && !emoji.preRendered && isToneSelectorEnabled) {
+        return /* @__PURE__ */ jsx(
+          SkinEmoji,
+          {
+            onEmojiSelect,
+            pickerId,
+            emoji,
+            onEmojiMouseEnter,
+            onEmojiMouseLeave
+          },
+          emoji.name
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Emoji,
+        {
+          onEmojiSelect,
+          pickerId,
+          onEmojiMouseEnter,
+          onEmojiMouseLeave,
+          emoji
+        },
+        emoji.name
+      );
+    }) })
+  ] });
+});
+var categoryDisplay_default = CategoryDisplay;
+export {
+  categoryDisplay_default as default
+};

package/dist/categoryDisplay-EAVZYFPJ.js

@@ -0,0 +1,205 @@
+import {
+  render,
+  useSearchValue,
+  useSkin
+} from "./chunk-LP6LBWNJ.js";
+
+// src/categoryDisplay.tsx
+import { ChevronDown } from "lucide-react";
+import { memo, useEffect, useState, useCallback, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Emoji = memo(function Emoji2({
+  pickerId,
+  emoji,
+  onEmojiMouseEnter,
+  onEmojiMouseLeave,
+  onEmojiSelect
+}) {
+  const handleMouseEnter = useCallback(() => {
+    window["emojipicker-" + pickerId].changeFooterEmoji(emoji);
+    window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
+    onEmojiMouseEnter(emoji);
+  }, [pickerId, emoji, onEmojiMouseEnter]);
+  const handleMouseLeave = useCallback(() => {
+    onEmojiMouseLeave(emoji);
+  }, [emoji, onEmojiMouseLeave]);
+  const handleClick = useCallback(() => {
+    onEmojiSelect(emoji);
+  }, [emoji, onEmojiSelect]);
+  const html = useMemo(() => render(emoji.char), [emoji.char]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      className: "HOKKIEMOJIPICKER-emoji text-4xl p-1 cursor-pointer hover:bg-white/15 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+});
+var SkinEmoji = memo(function SkinEmoji2({
+  pickerId,
+  emoji,
+  onEmojiSelect,
+  onEmojiMouseEnter,
+  onEmojiMouseLeave
+}) {
+  const skin = useSkin({ pickerId });
+  const fakeEmoji = useMemo(() => {
+    const charForSkin = [1, 2, 3, 4, 5].includes(skin) ? emoji.tones.find((a) => a.tone.find((b) => b === skin) === skin)?.char : emoji.char;
+    return {
+      ...emoji,
+      char: charForSkin,
+      preRendered: true,
+      tones: [
+        {
+          name: emoji.tones[0].name.replaceAll("1", "0"),
+          tone: [0],
+          char: emoji.char
+        },
+        ...emoji.tones
+      ]
+    };
+  }, [emoji, skin]);
+  const handleMouseEnter = useCallback(() => {
+    window["emojipicker-" + pickerId].changeFooterEmoji(fakeEmoji);
+    window["emojipicker-" + pickerId].changeSearchbarPlaceholder(emoji.name);
+    onEmojiMouseEnter(fakeEmoji);
+  }, [pickerId, fakeEmoji, emoji.name, onEmojiMouseEnter]);
+  const handleMouseLeave = useCallback(() => {
+    onEmojiMouseLeave(fakeEmoji);
+  }, [fakeEmoji, onEmojiMouseLeave]);
+  const handleClick = useCallback(() => {
+    onEmojiSelect(fakeEmoji);
+  }, [fakeEmoji, onEmojiSelect]);
+  const html = useMemo(() => render(fakeEmoji.char), [fakeEmoji.char]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      className: "HOKKIEMOJIPICKER-skinemoji text-4xl p-1 cursor-pointer hover:bg-white/15 rounded-sm size-12.5 flex items-center justify-center overflow-hidden",
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+});
+var CategoryDisplay = memo(function CategoryDisplay2({
+  category,
+  categoryInfo,
+  isToneSelectorEnabled,
+  onEmojiSelect,
+  onEmojiMouseEnter,
+  onEmojiMouseLeave,
+  pickerId
+}) {
+  const [isOpen, setIsOpen] = useState(true);
+  const searchValue = useSearchValue({ pickerId });
+  useEffect(() => {
+    setIsOpen(
+      (localStorage.getItem(
+        "hokkiemojipicker-category-" + category.name + "-open"
+      ) || "true") === "true"
+    );
+  }, [category.name]);
+  const searchLower = useMemo(
+    () => (searchValue || "").toLowerCase().replace(/_/g, " "),
+    [searchValue]
+  );
+  const filteredEmojis = useMemo(() => {
+    if (!searchLower) return null;
+    return category.emojis.filter(
+      (emoji) => emoji.name.toLowerCase().replace(/_/g, " ").includes(searchLower)
+    );
+  }, [category.emojis, searchLower]);
+  if (searchLower) {
+    if (category.name === "recentlyUsed")
+      return /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full" });
+    return /* @__PURE__ */ jsx(Fragment, { children: filteredEmojis.map((emoji) => {
+      if (emoji.hasTone && !emoji.preRendered) {
+        return /* @__PURE__ */ jsx(
+          SkinEmoji,
+          {
+            onEmojiSelect,
+            pickerId,
+            onEmojiMouseEnter,
+            onEmojiMouseLeave,
+            emoji
+          },
+          emoji.name
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Emoji,
+        {
+          onEmojiSelect,
+          pickerId,
+          emoji,
+          onEmojiMouseEnter,
+          onEmojiMouseLeave
+        },
+        emoji.name
+      );
+    }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "HOKKIEMOJIPICKER-categorydisplay flex flex-col relative w-full pt-2", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "HOKKIEMOJIPICKER-categoryHeader sticky top-0 pt-2 cursor-pointer text-white px-2 flex bg-[#131416] p-1 pb-2 " + category.name,
+        onClick: () => {
+          const newOpen = !isOpen;
+          setIsOpen(newOpen);
+          localStorage.setItem(
+            "hokkiemojipicker-category-" + category.name + "-open",
+            newOpen ? "true" : "false"
+          );
+        },
+        children: /* @__PURE__ */ jsxs("span", { className: "flex gap-1.5 items-center opacity-75 hover:opacity-100", children: [
+          /* @__PURE__ */ jsx("span", { className: "*:size-4.5", children: categoryInfo.icon }),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "text-md font-semibold font-gg", children: categoryInfo.name }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              strokeWidth: 2,
+              className: "transition-all size-5 data-[open=false]:-rotate-90",
+              "data-open": isOpen ? "true" : "false"
+            }
+          )
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-y-0.5", children: category.emojis.map((emoji) => {
+      if (emoji.hasTone && !emoji.preRendered && isToneSelectorEnabled) {
+        return /* @__PURE__ */ jsx(
+          SkinEmoji,
+          {
+            onEmojiSelect,
+            pickerId,
+            emoji,
+            onEmojiMouseEnter,
+            onEmojiMouseLeave
+          },
+          emoji.name
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Emoji,
+        {
+          onEmojiSelect,
+          pickerId,
+          onEmojiMouseEnter,
+          onEmojiMouseLeave,
+          emoji
+        },
+        emoji.name
+      );
+    }) })
+  ] });
+});
+var categoryDisplay_default = CategoryDisplay;
+export {
+  categoryDisplay_default as default
+};

package/dist/chunk-DMO3WEXH.js

@@ -0,0 +1,53 @@
+// src/render.tsx
+import tw from "@twemoji/api";
+function render(txt) {
+  let twemojiparsed = tw.parse(txt).replaceAll("<img", '<img style="object-fit: cover;" loading="lazy"');
+  if (txt.startsWith("<:") || txt.startsWith("<a:")) {
+    const id = txt.split(":")[2].split(">")[0];
+    const isAnimated = txt.startsWith("<a:");
+    const url = `https://cdn.discordapp.com/emojis/${id}.${isAnimated ? "gif" : "webp"}`;
+    twemojiparsed = `<img style="object-fit: cover;" src="${url}" loading="lazy" />`;
+  }
+  return twemojiparsed;
+}
+
+// src/hooks.tsx
+import { useEffect, useState } from "react";
+function useSkin({ pickerId }) {
+  const [skin, setSkin] = useState(0);
+  useEffect(() => {
+    let raf;
+    const loop = () => {
+      const newSkin = window["emojipicker-" + pickerId]?.skin;
+      setSkin(newSkin || 0);
+      raf = requestAnimationFrame(loop);
+    };
+    raf = requestAnimationFrame(loop);
+    return () => {
+      cancelAnimationFrame(raf);
+    };
+  }, [pickerId]);
+  return skin;
+}
+function useSearchValue({ pickerId }) {
+  const [searchValue, setSearchValue] = useState("");
+  useEffect(() => {
+    let raf;
+    const loop = () => {
+      const newSearchValue = window["emojipicker-" + pickerId]?.searchValue || "";
+      setSearchValue(newSearchValue);
+      raf = requestAnimationFrame(loop);
+    };
+    raf = requestAnimationFrame(loop);
+    return () => {
+      cancelAnimationFrame(raf);
+    };
+  }, [pickerId]);
+  return searchValue;
+}
+
+export {
+  render,
+  useSkin,
+  useSearchValue
+};