UNPKG

react-hamburger-button

Version:
73 lines (51 loc) 1.95 kB
# 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