Reactで開発中のアプリでタブ機能を実装したい…というときにおすすめらしい「react-tabs」モジュールのご紹介。
というか、分かりやすい記事を見つけたので、その備忘録です。
おすすめの記事はこちら。
【React】react-tabsが一番シンプルで使いやすい – イソップブログ
http://blog.yuhiisk.com/archive/2017/04/17/react-tabs.html
react-tabs の GitHubのページはこちらから。
GitHub – reactjs/react-tabs: An accessible and easy tab component for ReactJS.
https://github.com/reactjs/react-tabs
react-tabs のインストールは、下記のコマンドを実行します。
npm install react-tabs
問題がなければ、あとは放置でインストールが完了します。
コードは GitHubのページか、参考にさせていただいた記事にまるっと書いてあるので割愛させていただきます。
個人的にはイソップブログさんの方が丁寧に書かれていて分かりやすいので、こちらを参照するのをおすすめします。
react-tabs は Tab、Tabs、TabList、TabPanel の4つのみで構成されています。
確かにシンプル！
これなら導入も容易かな？
なお、react-tabsは自動的にCSSが適用されますが、こちらを無効にしたい場合は下記のコードを追加すればOKとのこと。
Tabs.setUseDefaultStyles(false);
こちらはコンポーネントの constructor 内で実行するのがオススメとのことでした。
恐らく、ほとんどの場合でデフォルトのCSSではなく、オリジナルのCSSを実装したいと思いますので、こちらは覚えておくのがよさそう。
以上、Reactでタブ機能を実装するときにおすすめのモジュール「react-tabs」のご紹介でした。
現在絶賛導入中なので、その際に追記したいことができたらまたまとめたいと思います。
