Reactで@emoji-mart （表示はunicodeからの変換で）

自分用のメモとして

作成にあたり困ったこと

直接絵文字を表示するのではなくemojiの型にあるunifiedから値を取って表示したかった・・・が、
unicodeを定数としてconstで扱いReactで表示するのは色々と困難な模様
一応こちらの記事で解を見たのでそちらを使わせていただき表示できるところまでメモ

なお、dataはなくても表示できてるみたい（理由については調べてないのでどなたか知っていれば是非）

下記セットで使用するテンプレ（加工必要）

importはファイルの配置場所で変えてもらって
使いたい場所にEmojiSetHookedコンポーネント配置で利用可

カスタムフック

useEmoji.ts

import { useCallback, useState } from 'react';

type ReturnValue = {
  isShow: boolean;
  printEmoji: string;
  switchEmojiList: () => void;
  onEmojiSelect: (data: Emoji) => void;
};

export const useEmoji = (): ReturnValue => {
  const [edata, setEdata] = useState<Emoji>();
  const [isShow, setIsShow] = useState(false);
  const targetUnicode =
    edata?.unified != null ? `&#x${edata?.unified};` : '&#x231b;';
  const arrUnicode = Array(targetUnicode);
  const printEmoji = String.fromCodePoint(
    parseInt(arrUnicode[0].replace(/&#x|;/g, ''), 16)
  );
  const switchEmojiList = () => {
    setIsShow((pre) => !pre);
  };

  console.log('use:', isShow);
  const onEmojiSelect = useCallback((data: Emoji) => {
    // console.log(data);
    // setUser({ ...user, name: user.name.concat(data.native) });
    // openEmojiDrawer();
    setEdata(data);
  }, []);

  return { isShow, printEmoji, switchEmojiList, onEmojiSelect };
};

const emojiSamole = {
  id: 'stuck_out_tongue',
  name: 'Face with Tongue',
  native: '😛',
  unified: '1f61b',
  keywords: [
    'stuck',
    'out',
    'prank',
    'childish',
    'playful',
    'mischievous',
    'smile',
  ],
  shortcodes: ':stuck_out_tongue:',
  emoticons: [':p', ':-p', ':P', ':-P', ':b', ':-b'],
};
type Emoji = typeof emojiSamole;

EmojiSetHooked.tsx

カスタムフックの利用先

import { FC } from 'react';
// import data from '@emoji-mart/data'; //サイズが大きいので無くて表示問題ないならない方がいいのかも？
import Picker from '@emoji-mart/react';
import { useEmoji } from 'hooks/useEmoji';
export const EmojiSetHooked: FC = () => {
  const { isShow, printEmoji, switchEmojiList, onEmojiSelect } = useEmoji();

  console.log('hooked:', isShow);

  return (
    <>
      <button
        style={{
          background: ' rgba(255,0,0,0)', // 最後の0で背景透過
          fontSize: '50px',
          padding: 0,
          border: '0px',
        }}
        onClick={switchEmojiList}
      >
        {/* ↓初期値 */}
        &#x1f600;
      </button>
      <p style={{ fontSize: '50px' }}>{printEmoji}</p>
      {isShow ? (
        <Picker
          //   data={data}
          onEmojiSelect={onEmojiSelect}
        />
      ) : null}
    </>
  );
};