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>