[React Bootstrap] Spinners を表示してみる | 心を無にして始める React

2022-07-28

今回は、Spinner コンポーネントを表示します。

準備

まだ components フォルダがなければ作ります。

src を右クリックして New Folder 。

components と入力してフォルダを作ります。

今回は、components フォルダに Spinner のコンポーネントを作って、表示してみます。

公式のドキュメントはここ。

https://react-bootstrap.github.io/components/spinners/

Spinner コンポーネントをつくる

component フォルダに Spinner.js を作ります。

Spinner.js を心を無にして編集してみます。

import React from 'react';
import { Spinner as BootstrapSpinner } from 'react-bootstrap';

function Spinner({
  animation = "border",
  ...otherProps
}) {
  return (
    <BootstrapSpinner animation={animation} {...otherProps} />
  )
}

export default Spinner;

プロジェクトでは、コンポーネントを統一したデザインで利用することが多いです。

そのため、（React Bootstrap のコンポーネントをその場その場でカスタマイズしながら使うよりも、）プロジェクトでコンポーネントにしたものを使うほうが、変更をお手軽に漏れなくできることが多いです。

Spinner コンポーネントを表示する

それでは、 App.js を編集して Spinner コンポーネントを表示します。

import React, { useState, useEffect } from 'react';
import './App.css';
import Spinner from './components/Spinner';

function App() {
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    const requestData = (cb) => {
      setTimeout(cb, 5000)
    }

    requestData(() => setLoading(false))
  }, [])

  return (
    <div className="p-5">
      {
        isLoading
          ? (
            <Spinner variant="primary" style={{ width: 64, height: 64 }} />
          )
          : (
            <div className="py-4">
              「データの読み込みおわりました」 ('◇')ゞ
            </div>
          )
      }
      <div className="py-2">
        <Spinner variant="primary" size="sm" />
        <Spinner variant="secondary" />
        <Spinner variant="success" style={{ width: 64, height: 64 }} />
        <Spinner variant="warning" style={{ width: 128, height: 128 }} />
      </div>
      <div className="py-2">
        <Spinner animation="grow" variant="primary" size="sm" />
        <Spinner animation="grow" variant="secondary" />
        <Spinner animation="grow" variant="success" style={{ width: 64, height: 64 }} />
        <Spinner animation="grow" variant="warning" style={{ width: 128, height: 128 }} />
      </div>
    </div>
  );
}

export default App;

画面を確認してみます。

はい、できました。