react-hamburger-button v0.0.1
react-hamburger-button
Installation
react-hamburger-button requires React 0.15 or later.
npm install --save react-hamburger-buttonDemo & Example
Live demo: https://mleko.gitlab.io/react-hamburger-button/
To build the example locally, clone this repo then run:
npm install
npm startUsage
React Hamburger Button has only two required props: open and onClick.
onClick
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 open. The function passed to onClick could look something like the following:
handleClick() {
this.setState({
open: !this.state.open
});
}An example use of React Hamburger Menu looks like:
<HamburgerMenu
open={this.state.open}
onClick={this.handleClick.bind(this)}
width={18}
height={15}
strokeWidth={1}
color='black'
animationDuration={0.5}
/>Note, not all props are required. All the props besides open and onClick have defaults.
Options
| Property | Type | Default | Description |
|---|---|---|---|
| open | bool | undefined | determines whether the menu is a hamburger or cross icon |
| onClick | func | undefined | will be invoked when the component is clicked |
| width | number | 40 | the width of the icon |
| height | number | 30 | the height of the icon |
| strokeWidth | number | 2 | the stroke width of the lines |
| color | string | #000 | the color of both icons |
| animationDuration | number | 0.4 | the length of time it takes for the icon transitions to complete. |
License
MIT Licensed Copyright (c) Cameron Bourke 2015, Daniel Król 2017
Credits
Component based on https://github.com/cameronbourke/react-hamburger-menu
8 years ago