1.0.1 • Published 5 years ago

react-responsive-menubar v1.0.1

Weekly downloads
24
License
MIT
Repository
github
Last release
5 years ago

React Responsive Menu Bar

How to install

npm install --save react-responsive-menubar

How to import into your component

import NavBar from 'react-responsive-menubar/lib/NavBar';

Usage Example

import React, { Component } from 'react';
import NavBar from 'react-responsive-menubar/lib/NavBar';

class App extends Component {

  state = {showSideNav:false}

  handleSideNavToggle = ()=>{
      this.setState((currentState)=>{
          return {showSideNav: !currentState.showSideNav}
      })
  }

 render(){
   //Position of navbar container (header in this case) should be set torelative.
  return(
      <header className="header" style={{position:"relative"}}>
          <NavBar 
          handleSideNavToggle={this.handleSideNavToggle} 
          logo={'https://picsum.photos/200/300?image=10'} 
          showSideNav={this.state.showSideNav} 
          logoStyles={{height:"65px", width:"85px"}} 
          navBarStyles={{boxShadow:"none"}} 
          linkStyles={{color:"green", fontWeight:"bold"}}>

              <a href="/">Link 1</a>
              <a href="/">Link 2</a>
              <a href="/">Link 3</a>
              <a href="/">Random Link</a>
              <a href="/">Link Finder</a>
              <a href="/">Home Page</a>
              <a href="/">Sample Link</a>
              <a href="/">Sign in or join</a>
              <a href="/">Help</a>

          </NavBar>
      </header>
  )
 }
}

API info (props passed)

PropValueDescription
logoURLThe image to be used as a logo
logoStyles{}A plain Javascript object holding style values for the logo. Ex- {height:"50px"}
navBarStyles{}A plain Javascript object holding style values for the navBar (container). Ex- {boxShadow:"none"}
linkStyles{}A plain Javascript object holding style values for the navigation links. Ex- {color:"red"}
showSideNavtrue/falseA boolean variable, to specify the visibility of the side navigation bar on small screens. Initially set to false and can be toggled using a callback function.
handleSideNavToggleA functionA Javascript function that toggles the visibility of the side navigation on small screen devices. It is usually triggered on the click event of a hamburger menu icon displayed on small screen devices