有益なReactライブラリまとめ

# この記事について
Web開発で１からいい感じのUIを作成しようと骨が折れることが多いですが、世の中にはOSSで簡単にかっこいいUIを作れるライブラリがあります。

本記事では、実際に使ってみてよかったそんな便利なReact UIライブラリをご紹介していきます。

**この記事は良さげなライブラリを見つけるたびに不定期更新していきます**
「こんなライブラリもあるよ！」という方はコメント欄へ🙏

ちなみに[GithubのReactトピック](https://github.com/topics/react)では面白いプロジェクトが結構見つかるので仕事の合間とかにみています。

## UI系
### Material UI
言わずもがな最も有名なUIフレームワーク
数年前に比べドキュメントも充実しコミュニティも成熟してきた感があり、サンプルが多いのも魅力的です。

https://github.com/mui-org/material-ui

### React Boostrap
超有名Web FrameworkのReact版。Material UIや後述のAnt Designよりもミニマルで学習コストも低い印象。

https://github.com/react-bootstrap/react-bootstrap

### Ant Design
Ant Designはアリババにより開発されているUIフレームワークです。
エンタープライズレベルのUIを提供しており、Material UIに次いで人気があります。


Ant DesignはUI構築に加えて以下のようなアニメーションが簡単に作れることも魅力的です。

![1*_6S4VTzzGwRtebx-ys4htA.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407956/6f693267-3a7e-a56d-66d0-fb4b8018970a.gif)

#### HP
https://ant.design

#### Github
https://github.com/ant-design/ant-design/

### Rebass
RebassはUIライブラリの中でもミニマルで洗練されたデザインが特徴的です。
Themeの管理がしやすく、個人でモダンなアプリを作るときには好んで使いますがまだStableではないため業務レベルではまだ導入が難しいかもしれません。

#### HP
https://rebassjs.org/

#### Github
https://github.com/rebassjs/rebass


### Evergreen
こちらもUIフレームワーク。個人的にはボタンのデザインやらが最近ぽくて好き。
ただ、[HP](https://evergreen.segment.com/)で紹介されているコンポーネントの半分はまだ開発途中なので実用性は低め。今後に期待です。

https://github.com/segmentio/evergreen

### Formik

https://github.com/formium/formik

###  React Loader Spinner

いい感じのローディング画面を表示してくれるライブラリ。
インポートしてパラメータ指定すればすぐに使えちゃいます。

![1*2nJgZmFETW8dRuP75Ch9qw.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407956/0c1fbc3b-d44e-40d4-37ee-8777a65ff596.gif)


https://github.com/mhnpd/react-loader-spinner

### Video React
YouTubeなどのビデオの埋め込みをいい感じにしてくれるライブラリ。
カバー画像を指定できるので見た目がいい感じになります。
自作しようとすると何気めんどくさかったりするので便利です。
[こちら](https://video-react.js.org)からサンプルを見ることができます。

https://github.com/video-react/video-react

### React Flicking
スクロールやスライドできるUIを提供してくれるライブラリ。言葉で説明するのは難しいので詳しくはDemoを見てみてほしい。かなり便利だし開発やメンテもちゃんとされていそうな感じ。
### Demo
https://naver.github.io/egjs-flicking/Demos

#### Github
https://github.com/naver/egjs-flicking/tree/master/packages/react-flicking

## Animation系
### React Typed
まるでタイピングしているように文字が動くテキストエフェクトを実装できるjQueryライブラリであるTyped.jsをReact用にType.jsをCommponentとしてラップしているライブラリ。

#### Github
https://github.com/ssbeefeater/react-typed

#### 本家Github
https://github.com/mattboldt/typed.js


### React Animations
こんな感じの簡単なアニメーションを実装できるライブラリ
![1*bkPR-nhoZ5aTw_et9Mt7Ow.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407956/55495f1e-7689-af10-57e9-77ccaf16a46d.gif)

#### Github
https://github.com/FormidableLabs/react-animations

### React Reveal
画面スクロールで起こるアニメーションに特化しているライブラリ。
HPに活用事例がたくさん掲載されているのが嬉しい。
現状Reactでスクロールアニメーション実装するならこれ一択。

#### HP
https://www.react-reveal.com

#### Github
https://github.com/rnosov/react-reveal

## Drag and Drop系

### react dnd
ReactでDrag and Dropの動作を実現できる元祖ライブラリ。

#### HP
https://react-dnd.github.io/react-dnd/about

#### Github
https://github.com/react-dnd/react-dnd/

### react beautiful dnd
![53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407956/ae9c1e5f-01f2-5d41-f73a-21866a562815.gif)
名前の通りreact dndよりも綺麗なUIを提供してくれる。
Githubのスター数もこちらが多く、私はこちらを好んで使います。

#### Github
https://github.com/atlassian/react-beautiful-dnd

ちなみにReactを使ったJiraのクローンプロジェクトではreact-beautiful-dndが使われていて、実装の参考になります。

https://github.com/oldboyxx/jira_clone

## グラフ、チャート系

### Recharts
![pasted image 0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407956/02279538-8c51-6cc1-d3ac-2c50d55a522b.png)

グラフ系では一番古いライブラリ。
SVGがサポートされていて、外部ライブラリの依存も少ないので使いやすいです。

https://github.com/recharts/recharts

### Victory
![pasted image 0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407956/471e7619-8b27-a1b2-a3e1-6aea8fd7b68e.png)
VictoryはReactとReact Nativeの両方に使うことのできるライブラリです。
ウェブとモバイルで同じAPIを利用しています。

https://github.com/FormidableLabs/victory

### Visx
![visx-gallery.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407956/bb236a9b-cb3f-9f8b-dfb0-571e10310d3f.png)

VisxはAirbnbによって開発されているチャートライブラリ。
再利用可能なコンポーネントを低レベルからカスタマイズできるため、独自のUIを作りたい方にはおすすめです。

https://github.com/airbnb/visx

### React-Vis
![pasted image 0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407956/88f9ed12-5c99-4f1c-84f2-ff8d2ccec015.png)

Uberにより開発されているチャート用ライブラリ。
他のライブラリよりも学習コストを低く簡単に実装できるような設計になっています。

https://github.com/uber/react-vis

### React StockCharts

![pasted image 0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407956/0002c6ee-a029-136e-09ee-3bb60cd2e9b1.png)

株価専用のチャートライブラリ。

https://github.com/rrag/react-stockcharts

## テーブル系

### Material Table
テーブル系ライブラリでは1番使えわれているライブラリ。
カスタマイズ性が高く、CSVエクスポートをサポートしているなど多機能です。

https://github.com/mbrn/material-table

### Material-UI-datatables

Material UIを使って実装されていて、レスポンシブなテーブルが構築可能です。

https://github.com/mbrn/material-table

## スライド系
### React PDF
PDFをコンポーネントとしてレンダリングしてみやすくしてくれるライブラリ

https://github.com/wojtekmaj/react-pdf

デモは[こちら](https://projects.wojtekmaj.pl/react-pdf/)から。

### Spectacle

Markdownやらからスライトを作成でき、スライド発表機能まで搭載されているライブラリ。
便利ですが、個人的には[Slidev](https://github.com/slidevjs/slidev)という最近でたVueベースのライブラリの方が高機能だし好きです。

https://github.com/FormidableLabs/spectacle

### React Awesome Slider
![demo-cube.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407956/2759b9af-af60-16f1-2244-0848baf35cf2.gif)
画像スライドを簡単に作成できるライブラリ。
ノーマルCSSを適応できたりカスタマイズ性が高く良い。

https://github.com/rcaferati/react-awesome-slider

### React Image Gallery
フォトギャラリーを簡単に作れるライブラリ。
私の場合GatsbyでHP作る時とかによく使います。

![React-Carousel-Image-Gallery.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407956/21d7b006-ae3c-22ca-4b43-d0ba70b0a35a.gif)

#### Example

https://reactjsexample.com/react-carousel-image-gallery-component-with-thumbnail-and-mobile-support/

#### Github

https://github.com/xiaolin/react-image-gallery

## その他

### react-textarea-autosize
名前の通り自動でサイズ調整してくれるTextInputを提供してくれるライブラリ。（詳しくはDemoを見てください）
何気に便利です。

#### Demo
https://andarist.github.io/react-textarea-autosize/
#### Github
https://github.com/Andarist/react-textarea-autosize

### Superset

Apacheにより提供されているReactのBIフレームワークです。かなり多機能ですが、個人開発では使い道は少なそうな感じ。本業は機械学習でデータよく使うので使いこなしたい！

https://github.com/apache/superset


### Docusaurus

Facebookが公開しているオープンソース開発のためのドキュメンテーションツール（ウェブサイト）です。Reactで書かれているためReactでカスタマイズや拡張ができます。

#### Github

https://github.com/facebook/docusaurus

#### HP

https://docusaurus.io/

## 終わりに
ここまで色々なライブラリを紹介してきましたが、ライブラリへの過度な依存はよきせぬエラーを招いたりする原因になるので、適度に。。。笑
ではよきReactライフを👋