2024-02-07
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
今回は月でやってみましたが、他の絵文字でも使えそうです。見てて使えそうだな、と思ったものをいくつかメモしておきます。
とりあえず作ってみるか、ぐらいの時でもロードしている感を出したい時に使おうと思ってます。
(というか、とりあえず作る機会がありそうなので、その準備としてやりました)