react-simple-sidenav v2.0.0

react-simple-sidenav

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, { useState } from 'react';
import SideNav, { MenuIcon } from 'react-simple-sidenav';

const MyComponent = (props) => {
  const [showNav, setShowNav] = useState();

  return (
    <div>
      <MenuIcon onClick={() => setShowNav(true)} />
      <SideNav showNav={showNav} onHideNav={() => setShowNav(false)} />
    </div>
  );
};

// With custom styles
import React, { useState } from 'react';
import SideNav, { MenuIcon } from 'react-simple-sidenav';

const MyComponent = (props) => {
  const [showNav, setShowNav] = useState();
  return (
    <div>
      <MenuIcon onClick={() => setShowNav(true)} />{' '}
      <SideNav
        showNav={showNav}
        onHideNav={() => setShowNav(false)}
        title="Hello World"
        items={['home', 'services', 'about', 'contact']}
        titleStyle={{ backgroundColor: '#4CAF50' }}
        itemStyle={{ backgroundColor: '#fff' }}
        itemHoverStyle={{ backgroundColor: '#CDDC39' }}
      />
    </div>
  );
};

// With custom items
import React, { useState } from 'react';
import SideNav, { MenuIcon } from 'react-simple-sidenav';

const MyComponent = (props) => {
  const [showNav, setShowNav] = useState();
  const navItems = [
    <a target="_blank" href="someLink">
      Link1
    </a>,
    <a target="_blank" href="someLink">
      Link2
    </a>,
    <a target="_blank" href="someLink">
      Link3
    </a>,
  ];

  const title = <h1>Hello octo </h1>;

  return (
    <div>
      <MenuIcon onClick={() => setShowNav(true)} />
      <SideNav showNav={showNav} onHideNav={() => setShowNav(false)} title={title} items={navItems} />
    </div>
  );
};

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