📜

Reactでcontextを使った汎用的に使えるタブ機能を作ってみた

    React.js
    React学習記録|なんとなく理解禁止シリーズ

Reactで実装した汎用的に再利用できるタブモジュールを作成してみたので記録に残しておきます。

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

基本的な使い方

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

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

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

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

実際に実装したサンプル

ソースコード一部抜粋

全てのソースコードはこちらのGitHubページから。

<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>