deve.K

エンジニアが未来を切り開く。

English
トップ > React基礎 > Reactでの簡単すぎるタブ実装 react-tabs

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

React基礎 ライブラリ

スポンサーリンク

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も一緒にインポートします。

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

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

簡単実装 Tabs

// App.js

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 reactGIF画像

もう完成です、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 reactGIF画像

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

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

     </Tabs>
    </TabPanel>

    <TabPanel>
  <Tabs forceRenderTabPanel> // さらにグループ化
        <TabList>
          <Tab>タブ5</Tab>
          <Tab>タブ6</Tab>
          <Tab>タブ7</Tab>
          <Tab>タブ8</Tab>
         
        </TabList>

react-tabsにはメインコンテナとして機能する複合コンポーネントがございますので紹介致します。

まずはTabsの複合コンポーネント

react-tabsに独自のスタイル

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

しかしデフォルトでスタイルは含まれていません。

代わりにコンポーネントは、スタイルを自分で適用するために使用できるレンダリングpropsを介して有用な情報を公開します。

デフォルトのスタイルを無効にする場合は

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

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

Tabs.setUseDefaultStyles(false);

forceRenderTabPanel

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

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

引数は基本的にはブール値となります。

<Tabs forceRenderTabPanel={true} />

すべてのタブにtrue設定すると、常にDOMにレンダリングされます。

デフォルトはfalseとなっております。

これはタブ間のアニメーションなどでは役に立つ場合があります。

defaultIndex

デフォルトで選択されているタブを変更します。

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

2番目は1と続きます。

これはreact-tabsが現在選択されているタブを内部で処理する場合にのみ非制御モードで使用できます。

disableUpDownKeys: bool

デフォルトではfalseです。

タブを変更するには、上下の矢印キーを無効にします。

onSelect

このイベントハンドラーは、タブ< Tab >が変更されるたびに呼び出されます。

つまりタブが選択されたときに呼び出される関数です。

引数として渡さるのはtabNameになります。

制御モードでは、onSelectハンドラーは必須の小道具となります。

const onSelect = ( tabName ) => {
    console.log( 'Selecting tab', tabName );
};
 
const MyTabPanel = () => (

        <TabPanel
        className="my-tab-panel"
        onSelect={ onSelect }>

親コンポーネントに1つのメソッドを作成する必要があります。

その小道具を子コンポーネントに渡し、子であるonSelectは親メソッドを呼び出します。

selectedIndex

インデックスを持つタブ< Tab >が選択されます

index(数値)はデフォルトでは0となります。

<Tabs selectedIndex={1} />

TabListの複合コンポーネントを紹介します

disabledTabClassName

タブが無効になっている場合付けられるカスタムクラスとなります。

タブを無効にするには『disabled』を使用します

無効になっているタブはマウスで選択できません。

また、キーボードを使用してタブリストをナビゲートするときにスキップされます。

<TabList>
        <Tab>Tab 1</Tab>
        <Tab disabled={true}>Tab 2</Tab>
        <Tab>Tab 3</Tab>

</TabList>

プロパティをtrue設定すれば無効となります。

タブの外側にカスタムクラス名を指定します。

<TabList disabledTabClassName="myDisabledClass" />

クラス名の配列またはクラス名がキーであり、値が名前を追加する必要があるかどうかを示すブール値であるオブジェクトを指定することも可能です。

ほとんどは文字列です。

activeTabClassName

タブがアクティブ状態時のみ付けられるカスタムクラス名となります。

<TabList activeTabClassName="myActiveClass" />

className

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

<TabList className="foo">
  <Tabs className="bar">
    <Tab>1</Tab>
  </Tabs>
  <TabPanel className="num">One</TabPanel
</TabList>

Tabで囲んだコンポーネントをreact-router-domを使用しページ間で画面遷移などで上手く連携させたりします。

react-router-dom 基礎での解説は以前しましたのでそちらで学んで見て下さい。

Reactタブには、操作できる2つの異なるモードがあり、状態を自分で管理する必要がある方法を変更します。

それは制御モードと非制御モードとなります。

react-tabsのデフォルトのモードであり、react-tabsコンポーネントにその状態を内部で処理させます。

defaultIndexで開始タブを変更でき、onSelectで変更可能です。

このモードでは、実行時にタブを強制的に変更することはできません。

本日は以上となります。

最後まで読んで頂きありがとうございます。

プライバシーポリシー