route-nav-tabs

A react component of swipeable nav tabs. It is composed with react-swipeable-views and react-router.

Demo

demo

Usage

run npm i route-nav-tabs react-router-dom --save

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router } from 'react-router-dom';
import { RouteInTheTabContents, Tab, Content } from 'route-nav-tabs';

// example of content components
import Foo from './Foo';
import Bar from './Bar';

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={props=><Bar {...props}/> unmountWhenNotMatch={true}} />
        
      </RouteInTheTabContents>
  </Router>
);
ReactDOM.render(<App />, document.getElementById('root'));

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.