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行未満です。
極力導入するライブラリはソースも見ていくようにして、気になる点があればプルリクエストを躊躇せず上げていくことで、ライブラリ関係のトラブルを少なくできるようになります!

Reactのお仕事に関するご相談

Bageleeの運営会社、palanではReactに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

eishis

Eishi Saito 総務

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

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

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

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

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

Miu マーケター

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

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

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

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

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

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

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

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP