Reactでの簡単すぎるタブ実装 react-tabs

react-tabsによる実装はすごくシンプルな設計で簡単に導入する事が出来る為、初学者でも扱いやすいタブ機能となっております。

個人的にはオススメで私も度々使用します。

公式react-tabsのgithub貼っておきます。

github/react-tabs

環境構築

Node.js

npm or yarn

create-react-app

React v17~

Windows or Mac

実装方法は簡単でございます

create-react-appで作成したご自身のプロジェクトにnpmで必要なモジュールをインストールします。

npm install —save react-tabs

yarn add react-tabs

これで準備は完了です！後はApp.jsファイルで importしましょう。

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

import 'react-tabs/style/react-tabs.css';

このCSSは元々react-tabsで用意されているCSSが適用されます、なのでCSSも一緒にimportします。

スタイルをご自身で適用する方法は後ほど！。

まずは簡単なタブコンポーネント実装から

const App = () => {
return(

  <Tabs>
    <TabList>
      <Tab>HOME</Tab>
      <Tab>About</Tab>
      <Tab>Contact</Tab>
    </TabList>

    <TabPanel>
      <h1>HOMEです</h1>
    </TabPanel>
    <TabPanel>
      <h1>Aboutです</h1>
    </TabPanel>
     <TabPanel>
      <h1>Contactです</h1>
    </TabPanel>
  </Tabs>
)

}

DEMO f:id:dev04K:20211125170529g:plain

もう完成です、Vanilla.jsでもタブ実装できますが

こっちは最速実装ですね！。

では使い方の説明を致します。

react-tabsの構成は『Tabs』『TabList』『Tab』『TabPanel』この4つのコンポーネントで構成されています。

Tabs

『Tabs』で追加の小道具を指定するとレンダリングされ『div 』に転送されます。つまりこのコンポーネントで全体を囲ってあげます。

TabList

『TabList』コンポーネントで追加の小道具を指定するとそれらはレンダリングされた『ul』に転送されるタブをまとめる親です。

Tab

『Tab』でのコンポーネントでの追加の小道具を指定した場合はレンダリングされて『li』として転送されます。タイトルやボタンなどを表示するコンポーネント。

TabPanel

『TabPanel』コンポーネントに追加の小道具を指定した場合もレンダリングされ『div』に転送されます『Tab』コンポーネントと同じ数と順番によって表示されます。

タブをネスト化してみましょう。

Tabのネスト化

const App = () => {
    return(
        
       <Tabs forceRenderTabPanel defaultIndex={1}>
    <TabList>
      <Tab>メインTab</Tab>
      <Tab>サブTab</Tab>
    </TabList>
    <TabPanel>
      <Tabs forceRenderTabPanel>
        <TabList>
          <Tab>タブ1</Tab>
          <Tab>タブ2</Tab>
          <Tab>タブ3</Tab>
          <Tab>タブ4</Tab>
        </TabList>
        <TabPanel>
          <p>タブ1ページ</p>
          
        </TabPanel>
        <TabPanel>
          <p>タブ2ページ</p>
        </TabPanel>
        <TabPanel>
          <p>タブ3ページ</p>
        </TabPanel>
        <TabPanel>
          <p>タブ4ページ</p>
        </TabPanel>

      </Tabs>
    </TabPanel>

    <TabPanel>
      <Tabs forceRenderTabPanel>
        <TabList>
          <Tab>タブ5</Tab>
          <Tab>タブ6</Tab>
          <Tab>タブ7</Tab>
          <Tab>タブ8</Tab>
         
        </TabList>
        <TabPanel>
          <p>タブ5ページ</p>
         
        </TabPanel>
        <TabPanel>
          <p>タブ6ページ</p>
         
        </TabPanel>
        <TabPanel>
          <p>タブ7ページ</p>
         
        </TabPanel>
        <TabPanel>
          <p>タブ8ページ</p>
        </TabPanel>
      </Tabs>
    </TabPanel>
  </Tabs>
       
    )
}

DEMO f:id:dev04K:20211125173416g:plain

ネストになるとやはり複雑化しますね。

『TabList』の上にさらに『Tabs』で囲っています。なので新しくdivでulをグループ化してるような感じだと思って下さい。

       <Tabs forceRenderTabPanel defaultIndex={1}>
    <TabList>
      <Tab>メインTab</Tab>
      <Tab>サブTab</Tab>
    </TabList>
    <TabPanel>
<Tabs forceRenderTabPanel> //ここです
        <TabList>
          <Tab>タブ1</Tab>
          <Tab>タブ2</Tab>
          <Tab>タブ3</Tab>
          <Tab>タブ4</Tab>
        </TabList>
</Tabs>

Tabsにある『forceRenderTabPanel defaultIndex={1}』

forceRenderTabPanelはデフォルトのreact-tabsでは選択したタブのコンテンツのみをレンダリングしコンポーネントをデフォルトでの動作を制御モードにします

defaultIndexのインデックス番号はデフォルトでは『0』となります。

react-tabsに独自のスタイル

react-tabsは基本的には用意されたCSSがありそれをインポートし適用させます。

それを無効にする場合は

setUseDefaultStylesメソッドを使用しますこの静的メソッドを1度呼び出すとデフォルトのスタイルを無効化する事が可能となります。

引数にはBool値である『true or false』の設定です

Tabs.setUseDefaultStyles(false);

基本的には4つのコンポーネントにはclassNameを付与する事が可能となっています。

ここからTabで囲んだコンポーネントをreact-router-domを使用しページ間で画面遷移などで上手く連携させたりします。 react-router-dom 基礎での解説は以前しましたのでそちらで学んで見て下さい。

deve.K

Hello, Welcome

Reactでの簡単すぎるタブ実装 react-tabs

環境構築

Tabのネスト化

react-tabsに独自のスタイル