react-hamburger-button
Version:
Simple hamburget button
73 lines (51 loc) • 1.95 kB
Markdown
# react-hamburger-button
## Installation
react-hamburger-button requires **React 0.15 or later.**
```
npm install --save react-hamburger-button
```
## Demo & Example
Live demo: [https://mleko.gitlab.io/react-hamburger-button/](https://mleko.gitlab.io/react-hamburger-button/)
To build the example locally, clone this repo then run:
```
npm install
npm start
```
## Usage
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:
```js
handleClick() {
this.setState({
open: !this.state.open
});
}
```
An example use of React Hamburger Menu looks like:
```js
<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