shapla-react-sidenav v1.0.0

React Sidenav

A simple side overlay navigation for React.

Table of contents

• Installation
• Usage

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