bms-react-simple-sidenav v1.1.1

react-simple-sidenav

Notice! This module is forked from Gaurav Chikhale. All credit goes to original authors. To see original please go here

Simple, light weight(4.78 kB), fully customizable React component for side navigation.

Inspired by Side Navigation Bar TL;DW episode of Supercharged

Demo: https://gauravchl.github.io/react-simple-sidenav/demo/

Install:

npm install react-simple-sidenav

Use:

import SideNav from 'react-simple-sidenav';

<SideNav
  title="Simple Sidenav"
  items={['Item 1', 'Item 2']}
  />

Props:

Examples:

with default styles

  import react from 'react';
  import SideNav, {MenuIcon} from 'react-simple-sidenav';

  React.createClass({
    render() {
      return(
        <MenuIcon onClick={() => this.setState({showNav: true})}/>

        <SideNav
          showNav = {this.state.showNav}
          onHideNav = {() => this.setState({showNav: false})} />
      )
    }
  })

with custom styles

  <SideNav
    showNav        =  {this.state.showNav}
    onHideNav      =  {() => this.setState({showNav: false})}
    title          =  "Hello World"
    items          =  {['home', 'services', 'about', 'contact']}
    titleStyle     =  {{backgroundColor: '#4CAF50'}}
    itemStyle      =  {{backgroundColor: '#fff'}}
    itemHoverStyle =  {{backgroundColor: '#CDDC39'}}
    />

with custom items

  <SideNav
    showNav={this.state.showNav3}
    onHideNav={()=>this.setState({showNav3:false})}
    title={<div>Hello octo <img src='git-mark.png' width='26' /></div>}
    titleStyle={{backgroundColor: '#2196F3'}}
    items={[
      <a target='_blank' href='https://github.com/gauravchl/react-simple-sidenav'>View Source on github</a>,
      <a target='_blank' href='https://www.npmjs.com/package/react-simple-sidenav'>Install via npm</a>,
      <a target='_blank' href='https://gauravchl.github.io/react-simple-sidenav/demo/'>demo</a>
      ]} />

Contributing:

Please feel free to submit any bugs or suggestions as issues. Pull requests are welcome. To build package locally run following commands which will build the package from source and update the demo inside react-simple-sidenav/demo/.

cd /react-simple-sidenav/
npm install
npm run build