Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/mhdfaisal/react-responsive-menubar
- Owner: mhdfaisal
- Created: 2019-04-16T14:10:03.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T06:08:11.000Z (about 2 years ago)
- Last Synced: 2024-12-15T07:35:57.620Z (19 days ago)
- Topics: component, menubar, npm-package, reactjs, responsive-web-design
- Language: CSS
- Homepage:
- Size: 527 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
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|