@shapla/react-sidenav

    1.0.0 • Public • Published

    React Sidenav

    A simple side overlay navigation for React.

    Table of contents

    Installation

    npm install --save @shapla/react-sidenav
    

    Usage

    Styles

    with Sass:

    import '@shapla/react-sidenav/src/index.scss';

    with CSS:

    import '@shapla/react-sidenav/dist/sidenav.css';

    Javascript Instantiation

    import React from 'react';
    import Sidenav from '@shapla/react-sidenav';
     
    class MyApp extends React.Component {
    
      constructor(props) {
        super(props);
    
        this.state = {
          activeLeftNav: false,
        }
      }
    
      render() {
        return (
          <div>
            <button onClick={() => this.setState({activeLeftNav: true})}>Show Sidenav</button>
    
            <Sidenav active={this.state.activeLeftNav} position={"left"}
                     onClose={() => this.setState({activeLeftNav: false})}/>
          </div>
        );
      }
    }

    Props

    Property Type Required Default Description
    active Boolean yes false Set true to show sidenav
    showOverlay Boolean no true Set false to hide overlay
    navWidth String no 300px Navigation width
    position String no left Value can be one of left, right, bottom, top
    onClose Function no ()=>{} Will trigger this when user click on background.

    Install

    npm i @shapla/react-sidenav

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    819 kB

    Total Files

    11

    Last publish

    Collaborators

    • sayful