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

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

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

基本的な使い方

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

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

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

TabTriggerとTabContentは、あくまでも機能面を提供するだけで、デザインは提供しません。なので、下記のように、任意の要素をそれぞれの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>