Skip to content

Latest commit

 

History

History
77 lines (55 loc) · 1.98 KB

README.md

File metadata and controls

77 lines (55 loc) · 1.98 KB
Raw

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.

include

import { HamburgerButton } from 'react-hamburger-button';

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:

<HamburgerButton
	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