route-nav-tabs
A react component of swipeable nav tabs. It is composed with react-swipeable-views and react-router.
Demo
Usage
run npm i route-nav-tabs react-router-dom --save
;;;; // example of content components;; const App = <Router> <RouteInTheTabContents basePath="" className= wrap: 'nav-tabs' contentWrap: 'contents' content: 'content' > <Tab pathname="foo" desc="foo's tab" /> <Tab pathname="bar" desc="bar's tab" /> /* Content will receive and pass Route's render methods (component/render/children). */ <Content pathname="foo" className="content-foo" component=Foo /> <Content pathname="bar" className="content-bar" render=<Bar ...props/> unmountWhenNotMatch=true /> </RouteInTheTabContents> </Router>;ReactDOM;
when navigate to localhost:3000/#/foo
, Foo component will render.
when swipe or tap the tabs from foo
to bar
, Foo will unmount and Bar will render.
API
Content
props | type | default | description |
---|---|---|---|
unmountWhenNotMatch | boolean | false | when tab switches, whether to umount previous tab's component. Only work when using component or render as Route 's render function . This prop will ignore if using children to render. |
onRender | function | noop | callback when route change and match. |