react-spinnersの使い方

はじめに

react-spinners は、Reactプロジェクトで使える軽量かつ美しいローディングスピナー集です。ここでは、基本的な使い方と「Now Loading...」画面での実用例を紹介します。

1. インストール

以下のコマンドを使って、react-spinners をインストールします。

1npm install react-spinners

2. 基本的な使い方

代表的なスピナーである ClipLoader を例に使い方を見てみましょう。

1'use client';
2
3import ClipLoader from 'react-spinners/ClipLoader';
4
5export default function LoadingExample() {
6  return <ClipLoader color="#36d7b7" size={50} />;
7}
8

• color: スピナーの色を設定
• size: スピナーの大きさ（数値、px単位）

3. Now Loading画面として使う例

アプリの読み込み中にスピナーを画面中央に表示する構成例です。

1'use client';
2
3import ClipLoader from 'react-spinners/ClipLoader';
4
5export default function LoadingScreen() {
6  return (
7    <div style={{
8      display: 'flex',
9      justifyContent: 'center',
10      alignItems: 'center',
11      height: '100vh',
12      flexDirection: 'column'
13    }}>
14      <ClipLoader color="#36d7b7" size={60} />
15      <p style={{ marginTop: '16px' }}>Now Loading...</p>
16    </div>
17  );
18}
19

この例では height: 100vh を使って画面全体をカバーし、中央にスピナーとテキストを表示しています。

4. 条件付きで表示する（例：データ読み込み中のみ）

ローディング状態に応じてスピナーを表示・非表示にするには以下のように書きます。

1'use client';
2
3import { useEffect, useState } from 'react';
4import ClipLoader from 'react-spinners/ClipLoader';
5
6export default function DataLoader() {
7  const [loading, setLoading] = useState(true);
8
9  useEffect(() => {
10    setTimeout(() => {
11      setLoading(false);
12    }, 2000); // 2秒後に読み込み完了
13  }, []);
14
15  if (loading) {
16    return (
17      <div style={{
18        display: 'flex',
19        justifyContent: 'center',
20        alignItems: 'center',
21        height: '100vh'
22      }}>
23        <ClipLoader color="#36d7b7" size={60} />
24      </div>
25    );
26  }
27
28  return <p>データの読み込みが完了しました。</p>;
29}
30

まとめ

• react-spinners を使えば手軽に美しいスピナーが使える
• ClipLoader をはじめ多数の種類が用意されている
• Now Loading画面やデータ読み込み時の表示にぴったり