Reactで簡単に進捗サークルを実装する方法【react-circle】

タスク管理ツールなどを使っていると円形で進み具合を表示する進捗サークルを使う場合などがあると思います。

そんな時react-circleを使うと簡単に実装することができます。デモサイトで試すことができて、かなり綺麗です。

なので今回の記事では進捗サークルを楽に実装できるreact-circleについて解説していきます。

react-circleの使い方

まずは必要なライブラリーのインストールが必要です。以下のコマンドを叩いて取り込みましょう。

yarn add react-circle

そして、以下のように実装すると綺麗な進捗サークルが表示されます。

index.jsx

import Circle from "react-circle";

export default function Index() {

  return (
    <div style={{marginTop: "50px", textAlign: "center"}}>
      <Circle
        progress={10}           //進捗率
        size="100px"            //円グラフのサイズ
        lineWidth="20px"        //円グラフの線幅
        progressColor="blue"    //進捗の色
        bgColor="#D3DEF1"       //残部分の色
        textColor="blue"        //進捗文字の色
      />

    </div>
  );
}

まずは必要なモジュールをインポートします。import Circle from "react-circle";で取り込んでいます。

後は取り込んだコンポーネントを表示して、プロパティを設定するだけです。以下に見た目を変更するために使うであろうプロパティーを並べておきます。

• progress：進捗率
• size：円グラフのサイズ
• lineWidth：円グラフの線幅
• progressColor：進捗の色
• bgColor：残部分の色
• textColor：進捗文字の色

初期表示時にアニメーションを使う

上記の状態で初期表示してもアニメーションが効かず、少し硬い印象を与えます。

もう少し遊びを加えるために、0から徐々に増えていくアニメーションを追加していきます。

index.jsx（アニメーションあり）

import { useEffect, useState } from 'react';
import Circle from "react-circle";

export default function Index() {
  //進捗率
  const [progress, setProgress] = useState(0);
  
  //レンダリング時に進捗率をセット
  useEffect(() => {
    setProgress(80)
  });

  return (
    <div style={{marginTop: "50px", textAlign: "center"}}>
      <Circle
        progress={progress}           //進捗率
        animationDuration="1s"        //アニメーション時間
      />
    </div>
  );
}

進捗の状態progressを保持して、初期表示時には0をセットします。そして、useEffectでレンダリングされたときに80がセットされanimationDurationに設定した時間分を使って進捗が進むようになっています。

まとめ

• Reactで進捗サークルを使うならreact-circleが簡単に実装できる
• useEffectとanimationDurationを使うことで初期表示時のアニメーションが効く