Have ideas to improve npm?Join in the discussion! »

    react-simple-sidenav

    2.0.0 • Public • Published

    react-simple-sidenav npm npm

    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/

    screen shot 2016-07-24 at 2 28 16 pm

    Install:

    npm install react-simple-sidenav
    

    Use:

    import SideNav from 'react-simple-sidenav'; <SideNav title="Simple Sidenav" items={['Item 1''Item 2']} />

    Props:

    Props Type Description
    style object Style for root element
    navStyle object Style for nav element
    titleStyle object Styles for title
    itemStyle object Styles for item
    itemHoverStyle object Hover style for item
    title node Will display on top
    items [node] Array of items in navigation list below the title
    showNav boolean Control whether to open or close side navigation
    openFromRight boolean This opens navigation from right side of the window, default is false (from left side).
    onShowNav function Trigger when navigation opens
    onHideNav function Trigger when navigation close
    children node Content of navigation. If supplying children to SideNav, title and items will be ignore and replaced by children

    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
    

    Install

    npm i react-simple-sidenav

    DownloadsWeekly Downloads

    237

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    13.7 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar