React で絵文字を使ったローディングっぽいものをカスタムフックで作ってみた

はじめに

React で絵文字で簡単にローディングっぽいものを作りたかったので、それを作ったメモです。

サンプルコード

複数の月の絵文字を 100ms ごとに差し替えるカスタムフックを作ってみました。

const LoadingEmojiList = [
  String.fromCodePoint(0x1f311),
  String.fromCodePoint(0x1f312),
  String.fromCodePoint(0x1f313),
  String.fromCodePoint(0x1f314),
  String.fromCodePoint(0x1f315),
  String.fromCodePoint(0x1f316),
  String.fromCodePoint(0x1f317),
  String.fromCodePoint(0x1f318),
] as const;

const useLoadingEmoji = (): string => {
  const counter = useRef<number>(0);
  const [loadingEmoji, setLoadingEmoji] = useState<string>(LoadingEmojiList[0]);

  useEffect(() => {
    const id = setInterval(() => {
      counter.current += 1;
      setLoadingEmoji(
        LoadingEmojiList[counter.current % LoadingEmojiList.length]
      );
    }, 100);
    return () => clearInterval(id);
  }, []);

  return loadingEmoji;
};

こんな感じで組み込めます。

export const App: FC = () => {
  const loadingEmoji = useLoadingEmoji();

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <h1 style={{ textAlign: 'center', fontSize: '4rem' }}>
        Loading Emoji {loadingEmoji}
      </h1>
    </div>
  );
};

こんな感じで動作します。

StackBlitz で作りました。
https://stackblitz-starters-cwpnbh.stackblitz.io

他にも使えそうな絵文字

今回は月でやってみましたが、他の絵文字でも使えそうです。見てて使えそうだな、と思ったものをいくつかメモしておきます。

• 地球儀: 🌎
• 砂時計: ⏳

おわりに

とりあえず作ってみるか、ぐらいの時でもロードしている感を出したい時に使おうと思ってます。
（というか、とりあえず作る機会がありそうなので、その準備としてやりました）