2018年4月25日

プログラミング

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

目次

  1. はじめに
  2. react-circleの使い方
  3. まとめ

はじめに

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

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

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
デモサイトはこちらです。
react-circular-progressbar.gif (23.8 kB)

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

progress

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

68747470733a2f2f742e616c697061796f626a656374732e636f6d2f696d616765732f543132703867586a706758585858585858582e676966.gif (83.1 kB)

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

react-progress-circle

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

 2018-04-24 23.19.29.png (13.8 kB)

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

まとめ

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

0

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP