• This repository has been archived on 28/Feb/2022
  • Stars
    star
    106
  • Rank 325,871 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 9 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Built for React, handy menu icon.

React Hamburger Menu

Built for React, this is a handy UI component for a menu icon in a mobile site or application.

Installation

react-hamburger-menu requires React 0.14 or later.

npm install --save react-hamburger-menu

Demo & Example

Live demo: cameronbourke.github.io/react-hamburger-menu

To build the example locally, clone this repo then run:

npm install
npm start
Then open localhost:8080 in a browser.

Usage

React Hamburger Menu only has two required props. They are isOpen and menuClicked. The other 7 props are optional.

menuClicked

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 isOpen. The function passed to menuClicked could look something like the following:

handleClick() {
	this.setState({
		open: !this.state.open
	});
}

An example use of React Hamburger Menu looks like:

<HamburgerMenu
	isOpen={this.state.open}
	menuClicked={this.handleClick.bind(this)}
	width={18}
	height={15}
	strokeWidth={1}
	rotate={0}
	color='black'
	borderRadius={0}
	animationDuration={0.5}
/>

Note, not all props are required. All the props besides isOpen and menuClicked have defaults.

Options

Property Type Default Description
isOpen bool undefined determines whether the menu is a hamburger or cross icon
menuClicked func undefined will be invoked when the component is clicked
width number 36 the width of the icon
height number 30 the height of the icon
strokeWidth number 2 the stroke width of the lines
rotate number 0 the rotation of the icon, eg {45} would be 45deg
color string #000 the color of both icons
borderRadius number 0 the border radius of the lines
animationDuration number 0.4 the length of time it takes for the icon transitions to complete.
className string undefined the class name for the container element

Todo

  • Add Unit Tests

License

MIT Licensed Copyright (c) Cameron Bourke 2016