react-tabs-wrapper
A helper component for rendering tabs using the react-tabs package.
Installation
Using npm:
npm install --save react-tabs-container
Usage
react-tabs-container is just a wrapper component with a factory to create TabPanels on the fly. To use this component, first thing:
;
You need a list of objects representing the data needed to build each tab and its content:
const tabListData: TabListData = id: "tab1" name: "The first tab" { return <TabContent1 ...props />; } permissions: "all" "tab1" id: "tab2" name: "Tab the second" { return <TabContent2 ...props />; } permissions: "tab2" id: "tab3" name: "A Third" { return <TabContent3 ...props />; } permissions: "tab3" id: "tab4" name: "Finally the fourth" { return <TabContent4 ...props />; } permissions: "tab1" "tab4" }
Then in your render function:
{ const props: TCProps = tabList: "tab1" "tab2" "tab3" "tab4" tabListData permissions: "tab1" "tab2" containerName: "admin-page-view" classes: "admin-page-view-tabs" viewType: "top-level" dataPassThru: storeId: thispropsstoreId ; return <div className="admin-page page"> <TabsContainer ...props /> </div> ;}
Styling
There are no styles loaded by default. See react-tabs for instructions on using the styles included.
License
MIT
Status
This is very much a work in progress. Currenly at:
- Component works as expected
- API Locked
- Documentation
- Examples
- Tests
More to come.