目的
Reactでコンテキストメニューを作るライブラリが数種類あるので、比較の覚書です
環境
- React 17.0.1
- react-dom 17.0.1
比較
react-contextmenu
https://github.com/vkbansal/react-contextmenu
動作サンプル
https://vkbansal.github.io/react-contextmenu/#/
良い点
- サポートされているブラウザが多い
- 複雑なメニューも実装できる
- Right to Leftに対応している
- ダウンロードが随時50,000前後と多く、よく選ばれている
課題
- 2020/8にサポートを停止したため、自分でforkしてメンテナンスする必要がある
- スタイル管理機能はない
- 標準でCSSは用意されていないため自分で指定する必要がある
- サンプル は提供されています
- styled-componentsなどStyles in JSなフレームワークと組み合わせにくいかもしれない
react-contextify
https://github.com/fkhadra/react-contexify
動作サンプル
https://fkhadra.github.io/react-contexify/
良い点
- ある程度サポートやライブラリの更新が行われている
- TypeScript対応している
- サブメニューが簡単に作れる
- ドキュメントが充実している
-
スタイル管理機能 がある
- Sass, styled-component を利用できる
- テーマを利用できる
課題
- サポートやメンテナンスが少し停滞気味
- 2021/06の最新は 2020/12リリースのv5.0.0 で半年更新がない
Material UI
https://material-ui.com/
動作サンプル
https://material-ui.com/components/menus/
良い点
- サポートや機能開発が定期的に行われる
- 細かくスタイルを設定できる
- TypeScript対応している
課題
- 将来的にはMaterial UIのv5とv4どちらを採用するか、周辺ライブラリが対応しているMaterial UIのバージョンと合わせて判断が必要
- 2021/06/06時点でMaterial UI 5はアルファ版
- UIしか提供されないので基本は全て実装が必要
- サブメニューや、コンテキストメニューでよく使われるロジック、Hookなどは標準で用意されていない
- material-ui-nested-menu-item などMaterial UIベースのライブラリがあるが、更新頻度が低かったり要件に合わなかったりする
まとめ
Reactでコンテキストメニューを作るライブラリは
- サポートや継続的な機能開発がないライブラリもある
- スタイル管理、TypeScriptサポートの有無はライブラリによる
- 作者は react-contextify を採用しましたが、更新頻度が落ちているので今後のメンテナンスは要検討だと思いました
他にも良いライブラリがあったら是非教えてください。