Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mhdfaisal/react-responsive-menubar

A responsive menu bar React Js component, can be pulled in as a package from npm for instant usage or forked and modified as per the requirements
https://github.com/mhdfaisal/react-responsive-menubar

component menubar npm-package reactjs responsive-web-design

Last synced: 4 days ago
JSON representation

A responsive menu bar React Js component, can be pulled in as a package from npm for instant usage or forked and modified as per the requirements

Awesome Lists containing this project

README

        

# React Responsive Menu Bar

### How to install
`npm install --save react-responsive-menubar`

### How to import into your component
```javascript
import NavBar from 'react-responsive-menubar/lib/NavBar';
```

### Usage Example

```javascript
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(

Link 1
Link 2
Link 3
Random Link
Link Finder
Home Page
Sample Link
Sign in or join
Help



)
}
}
```

### API info (props passed)

| Prop | Value | Description |
| ------------- |:-------------:| -----|
| logo | URL | The 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"} |
| showSideNav | true/false | A 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. |
| handleSideNavToggle | A function | A 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|