cameronbourke / react-hamburger-menu

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

react-hamburger-menu's Issues

No mouse hover

I know it's firstly made for mobile phones, but it should have the onhover effect, or at least mouse to be changed to pointer.

Push latest fixes for React 15 to NPM

Simply put, the version in the NPM repo doesn't have all the latest code fixes that are present on github.

Ability to add custom classNames

I did this locally. I can create a PR if you'd like.

Warning: Component HamburgerMenu declared `PropTypes` instead of `propTypes`

Thanks for a great package. I'm getting the following warning:

Call click function manually

Is it possible to call the click function? I have a

element next to the hamburger component saying "menu". How can I trigger the menu when a user clicks on the

element?

Compatibility with not-incredibly-old browsers

Lack of Object.assign was breaking this in Safari <= 8 on a project. I implemented a polyfill on my branch (though don't necessarily want to submit a PR, as I've made other changes and this may not be the solution you want).

React ^15.5 PropTypes is deprecated

Hello, I upgraded to react 16 and PropTypes is deprecated. So I added.. to dist/index.js
var PropTypes = require('prop-types');

HamburgerMenu.PropTypes = {
isOpen: PropTypes.bool.isRequired,
menuClicked: PropTypes.func.isRequired,
width: PropTypes.number,
height: PropTypes.number,
strokeWidth: PropTypes.number,
rotate: PropTypes.number,
color: PropTypes.string,
borderRadius: PropTypes.number,
animationDuration: PropTypes.number
};

Zindex prop

I have added a z-index prop for when you want to be able to control the layering of the burger menu. Can you give me access rights and I can push the change up so everyone else can start using it too.