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/
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:
{ this;}
An example use of React Hamburger Menu looks like:
<HamburgerMenu open=thisstateopen onClick=thishandleClick width=18 height=15 strokeWidth=1 color='black' animationDuration=05/>
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