Reactでプログレスサークル、react-circle【今日のGitHubトレンド】

はじめに

GitHubのトレンドリポジトリを定期的にご紹介するシリーズです。
今回はReactでリッチなSVG形式のプログレスサークルを実現できる、react-circleをご紹介します。

イメージが湧きづらいと思うので、公式にあるGifをご覧ください。

react-circleの使い方

react-circleのデモはこちらをご覧ください。

react-circleを導入する

Reactのプロジェクトにreact-circleを導入していきます。
yarn add react-circle
もしくは
npm install --save react-circle
でreact-circleをインストールしましょう。

使い方

公式のサンプルコードです。

import Circle from 'react-circle';

<Circle
  progress={35}
/>

react-circleからCicleコンポーネントをインポートします。
そしてCircleのpropsとしてprogress（進捗％）を与えてあげることで、プログレスサークルを実装できます。

propsのご紹介

では、react-circleで使えるpropsを公式からご紹介します。

animate={true} // アニメーションをつけるかどうか
responsive={true} // SVGをレスポンシブにするかどうか
size={150} // 円の大きさ
lineWidth={14} // 円の線の太さ
progress={69} // 進捗（％）
progressColor="cornflowerblue"  進捗部分の色
bgColor="whitesmoke" //円の進捗部分以外の色
textColor="hotpink" //テキスト部分の色
textStyle={{ 
font: 'bold 5rem Helvetica, Arial, sans-serif' // テキスト部分のスタイル
}}
percentSpacing={10} // %と数値部分の余白
roundedStroke={true} // 円の進捗部分に丸みをもたせるかどうか
showPercentage={true} // 進捗数値部分を表示させるかどうか
showPercentageSymbol={true} // 進捗の%部分を表示させるかどうか

その他のプログレスサークル系のライブラリ

最後に、他のライブラリをご紹介します。

react-circular-progressbar

公式GitHub
デモサイトはこちらです。

柔らかいアニメーションや描画の種類も多いので、使いやすいライブラリです。

progress

公式GitHub
デモサイトはこちらです。

プログレスバーも実装することができ、こちらも人気のライブラリです。

react-progress-circle

公式GitHub
デモサイトはこちらです。

スター数やメンテナンスの頻度からも、あまり採用すべきでないかもしれません。

まとめ

簡単に実装することができ、自然なアニメーションも可能なreact-circleをご紹介しました。
また、他のライブラリもいくつかご紹介しましたが、ポイントとしてメンテナンスが確実にされているか（頻度や最終更新日付）を気にするようにしましょう。
そしてreact-circleのメインロジックも、実は100行未満です。
極力導入するライブラリはソースも見ていくようにして、気になる点があればプルリクエストを躊躇せず上げていくことで、ライブラリ関係のトラブルを少なくできるようになります！