React

Reactで管理画面をつくるときに便利だったライブラリ集と所感

主に未来の自分用

material-ui

  • Material DesignをReactでコンポーネント化したもの
  • UIパーツになっているのでパパっと使えるし、あとでカスタマイズするときもけっこう融通が効く
  • 現在1.0.0がbetaでアップデートが激しく破壊的変更も多いので、場面に合わせてStableとどちらを採用するか決めるのがよい。

admin-on-rest

  • REST APIを叩くクライアントとして最適化された感じの管理画面コンポーネント集
  • インデックスがあって、閲覧ページがあって、登録ページがあって、みたいなよくある画面が素早くつくれる
  • Material UIを内部で使っていて、さらに管理画面用に高レベルなコンポーネント(テーブルとか新規作成フォームとか)が実装されている
  • カスタマイズ性もまぁまぁ高い。CRUDではないエンドポイントでも拡張可能。
  • create-react-appからはじめる形なのが個人的に好き(けっこうこの手のやつはサンプルプロジェクトをgit cloneして使えみたいなのが多くて辟易する)
  • Material-UI v1に対応して名前が react-adminに変わってた

DevExtreme React Grid

  • いわゆるデータテーブル系
  • フィルタ、ソート、仮想テーブル(無限スクロール)、追加・編集など基本的なものに一通り対応している
  • カスタマイズ性も割とある。セルのレンダラーを独自のReactコンポーネントにできる
  • ControlledとUncontrolledに対応してるので、カジュアルに使ってもreduxとかでstate管理してもよい
  • Material UIとBootstrapの2種類のスタイルが提供されている
  • ExcelやSpreadsheet的なコントロールポイント掴んでグイっと複数セルに展開するような操作はできない

react-handsontable

  • HandsontableのReact wrapper
  • いわゆるExcel的な操作ができる
  • カラム間(水平方向)でセルを展開できる(いろいろ探したが他に対応してるライブラリが見つからず)
  • セルのレンダラーにReactコンポーネントを使いたいときはreact-lruを使うとよい

react-infinite

  • いわゆる無限スクロールを簡単に実装できる

react-sizeme

  • 無限スクロールする要素をレスポンシブにしたいときに便利
  • windowのリサイズ時にサイズをpropsとして得られる

react-chartjs-2

  • chart.jsのReact wrapper
  • react-chartjsのv2ブランチは使ってないのでどっちがいいのかはわからない
  • rechartsというReactに最適化されたチャートライブラリもあって、Reactらしくかけて気持ちいいが、今のところやや低機能でけっきょくchart.js使うことにした

またなんか見つかったら追記する