react-hamburger-menu
v1.2.1
Published
Dead simple Hamburger Menu to use as a mobile nav, with a bunch of styling options.
Downloads
15,828
Maintainers
Readme
React Hamburger Menu
Built for React, this is a handy UI component for a menu icon in a mobile site or application.
Installation
react-hamburger-menu requires React 0.14 or later.
npm install --save react-hamburger-menu
Demo & Example
Live demo: cameronbourke.github.io/react-hamburger-menu
To build the example locally, clone this repo then run:
npm install
npm start
Then open localhost:8080 in a browser.
Usage
React Hamburger Menu only has two required props. They are isOpen
and menuClicked
. The other 7 props are optional.
menuClicked
Note: This prop is passed a function
. This function will be invoked when the component is clicked
. The function should responsible for updating the state that is passed to isOpen
. The function passed to menuClicked
could look something like the following:
handleClick() {
this.setState({
open: !this.state.open
});
}
An example use of React Hamburger Menu looks like:
<HamburgerMenu
isOpen={this.state.open}
menuClicked={this.handleClick.bind(this)}
width={18}
height={15}
strokeWidth={1}
rotate={0}
color='black'
borderRadius={0}
animationDuration={0.5}
/>
Note, not all props are required. All the props besides isOpen
and menuClicked
have defaults.
Options
Property | Type | Default | Description
------------- | ------------- | --------- | ----------
isOpen | bool | undefined | determines whether the menu is a hamburger or cross icon
menuClicked | func | undefined | will be invoked when the component is clicked
width | number | 36 | the width of the icon
height | number | 30 | the height of the icon
strokeWidth | number | 2 | the stroke width of the lines
rotate | number | 0 | the rotation of the icon, eg {45} would be 45deg
color | string | #000 | the color of both icons
borderRadius | number | 0 | the border radius of the lines
animationDuration | number | 0.4 | the length of time it takes for the icon transitions to complete.
className | string | undefined | the class name for the container element
Todo
- Add Unit Tests
License
MIT Licensed Copyright (c) Cameron Bourke 2016