Nevertheless Published Mine

    route-nav-tabs

    0.3.0 • Public • Published

    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.

    Install

    npm i route-nav-tabs

    DownloadsWeekly Downloads

    19

    Version

    0.3.0

    License

    MIT

    Last publish

    Collaborators

    • nonjene