この記事について

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

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

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

UI系

Material UI

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

Ant Design

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

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

HP

Github

React Loader Spinner

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

GitHub

Animation系

React Typed

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

Github

本家Github

React Animations

こんな感じの簡単なアニメーションを実装できるライブラリ

Github

React Reveal

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

HP

Github

グラフ、チャート系

Recharts

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

Victory

VictoryはReactとReact Nativeの両方に使うことのできるライブラリです。
ウェブとモバイルで同じAPIを利用しています。

Visx

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

React-Vis

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

React StockCharts

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

テーブル系

Material Table

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

Material-UI-datatables

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

スライド系

React PDF

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

デモはこちらから。

Spectacle

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

React Awesome Slider

画像スライドを簡単に作成できるライブラリ。
ノーマルCSSを適応できたりカスタマイズ性が高く良い。

React Image Gallery

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

Example

Github

終わりに

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