Create Next App

Reactで実装した汎用的に再利用できるタブモジュール。モジュールのスコープ内でデータのやり取りも完結できるようにReactのcontextを利用。<TabProvider>でラップして簡単に実装でき、TabProvider内に複数のタブトリガーがあっても連携可能。逆に、TabProviderの外にある別のタブには干渉しない。

基本的な使い方

詳しくは、GitHubのREADME.md参照。（まだ記入中...）

Tabモジュールから提供されるコンポーネントは下記の3つ。

<TabProvider>：タブとコンテンツをラップして情報をシェアするコンポーネント
<TabTrigger>：タブのトリガーにしたい要素を包むコンポーネント
<TabContent>：タブのコンテンツにしたい要素を包むコンポーネント

TabTriggerとTabContentは、あくまでも機能面を提供するだけで、デザインは提供しません。なので、下記のように、任意の要素をそれぞれのTabコンポーネントでラップしてタブ機能を付与します。

最小限のサンプル

<TabProvider initialState={{
  active: '001'
}}>
  <div className="list">
    <TabTrigger member={{
      id: '001'
    }}>
      <div style={{border: '1px solid #fff', padding: '9px'}}>
        タブ001
      </div>
    </TabTrigger>
    <TabTrigger member={{
      id: '002'
    }}>
      <div style={{border: '1px solid #fff', padding: '9px'}}>
        タブ002
      </div>
    </TabTrigger>
    <TabTrigger member={{
      id: '003'
    }}>
      <div style={{border: '1px solid #fff', padding: '9px'}}>
        タブ003
      </div>
    </TabTrigger>
  </div>
  <TabContent member={{
    id: '001'
  }}>
    <div style={{backgroundColor: 'rgba(255, 255, 255, .2)', padding: '9px'}}>
      <p>
        001
      </p>
    </div>
  </TabContent>
  <TabContent member={{
    id: '002'
  }}>
    <div style={{backgroundColor: 'rgba(255, 255, 255, .2)', padding: '9px'}}>
      <p>
        002
      </p>
    </div>
  </TabContent>
  <TabContent member={{
    id: '003'
  }}>
    <div style={{backgroundColor: 'rgba(255, 255, 255, .2)', padding: '9px'}}>
      <p>
        003
      </p>
    </div>
  </TabContent>
</TabProvider>

⚒️

インタラクションのカスタマイズ性向上

import TabTrigger from "@/modules/Tab/components/TabTrigger"
import TabItem from "@/app/(root)/(uni-lab)/components/atoms/TabItem"

<TabTrigger member={member}>
  <TabItem name={member.name} />
</TabTrigger>

TabTriggerは何の装飾もしていないので、その中に入れた要素で自由にスタイルのカスタマイズができる。ただ、現状はトリガー時のインタラクションのカスタマイズ性に欠ける。

React｜タブ汎用モジュール研究

基本的な使い方

最小限のサンプル