気になっているReact(JavaScript)のライブラリ
2020/07/13
概要
ライブラリの調査を普段やっていて、気になったものや、今話題になっているライブラリを一覧にしました。 気になっているレベルのライブラリがほとんどなので、もし使用したことのある方がいればぜひコメント欄で使用感を教えてください!
フォーム
React Hook Form
![スクリーンショット 2020-02-22 15.53.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278650/c014cbfb-6946-e331-86b9-a2ace1773df4.png)
スター数
- 7,155 (2020/02/22)
特徴・気になった理由
-
ドキュメントが日本語対応している
- ドキュメントの見た目がかわいい w
-
去年の年末ごろからかなりホットになっている
- hooks ベース
- Formik,ReduxForm と比べてかなり軽量、無駄な State 更新を行わないためパフォーマンスが高い
使ってみた感想
useForms を使用することで、コンポーネントに記述するフォームの State 管理の処理が 3 分の 1 ほどに減らすことができたと思います。 用意されている Props が Formik,ReduxForm と変わらないため、ほぼ同じ使用感で高パフォーマンスのフォームを作成することができると思いました。
アニメーション
Popmotion
![スクリーンショット 2020-02-22 16.13.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278650/09cb695a-f330-929a-1128-d6000d867f68.png)
- 他にも Util に特化したライブラリなどがありますが、今回は React のために用意された Flamer Motion を載せておきます!
Framer Motion
![スクリーンショット 2020-02-22 16.16.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278650/1cef5f73-1fdd-f6e6-e7a9-aa78029c2cc7.png)
スター数
- 4,8k (2020/02/22)
特徴・気になった理由
- hooks ベース
- サンプルが豊富
React Simple Animate
![スクリーンショット 2020-02-22 16.36.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278650/a8de57b8-17e8-cb2f-7bc6-efbcd5bcbc7d.png)
スター数
- 1,270 (2020/02/22)
特徴・気になった理由
- アニメーションを使用したい時に、記述が少なくすぐに実装できるため
react-animated-css
![スクリーンショット 2020-02-22 16.40.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278650/333e3e43-ef13-eaea-fbd3-d563d2cb69ee.png)
スター数
- 8,802 (2020/02/22)
特徴・気になった理由
- Animate.css の React 用ライブラリ
使ってみた感想
めちゃめちゃ簡単にアニメーションできる!!!