Reactで管理画面をつくるときに便利だったライブラリ集と所感
この記事はQiitaの記事をエクスポートしたものです。内容が古くなっている可能性があります。 主に未来の自分用
Material DesignをReactでコンポーネント化したもの
UIパーツになっているのでパパっと使えるし、あとでカスタマイズするときもけっこう融通が効く
現在1.0.0がbetaでアップデートが激しく破壊的変更も多いので、場面に合わせてStableとどちらを採用するか決めるのがよい。
v1がStableになった
REST API(やGraphQL)を叩くクライアントとして最適化された感じの管理画面コンポーネント集
インデックスがあって、閲覧ページがあって、登録ページがあって、みたいなよくある画面が素早くつくれる
Material UIを内部で使っていて、さらに管理画面用に高レベルなコンポーネント(テーブルとか新規作成フォームとか)が実装されている
カスタマイズ性もまぁまぁ高い。CRUDではないエンドポイントでも拡張可能。
create-react-appからはじめる形(= exampleプロジェクトをコピペではない)なのが個人的に好き
いわゆるデータテーブル系
フィルタ、ソート、仮想テーブル(無限スクロール)、追加・編集など基本的なものに一通り対応している
カスタマイズ性も割とある。セルのレンダラーを独自のReactコンポーネントにできる
ControlledとUncontrolledに対応してるので、カジュアルに使ってもreduxとかでstate管理してもよい
Material UIとBootstrapの2種類のスタイルが提供されている
ExcelやSpreadsheet的なコントロールポイント掴んでグイっと複数セルに展開するような操作はできない
HandsontableのReact wrapper
いわゆるExcel的な操作ができる
カラム間(水平方向)でセルを展開できる(いろいろ探したが他に対応してるライブラリが見つからず)
いわゆる無限スクロールを簡単に実装できる
無限スクロールする要素をレスポンシブにしたいときに便利
windowのリサイズ時にサイズをpropsとして得られる
react-sizeme がhooksに対応してないのでこちらに移行
chart.jsのReact wrapper
rechartsというReactに最適化されたチャートライブラリもあって、Reactらしくかけて気持ちいいが、今のところやや低機能でけっきょくchart.js使うことにした 今っぽいおしゃれチャートがかける
機能も充実してる
またなんか見つかったら追記する