├── .babelrc
├── .gitignore
├── LICENSE.md
├── README.md
├── example
    ├── App.js
    ├── app.css
    ├── index.html
    └── webpack.config.js
├── package.json
├── src
    └── HamburgerMenu.js
├── webpack.config.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"plugins": ["@babel/plugin-proposal-object-rest-spread"],
3 |   "presets": [
4 | 		["@babel/preset-env", { "loose": true, "useBuiltIns": "entry" }],
5 | 		"@babel/react"
6 | 	],
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .DS_Store
4 | *.log
5 | example/bundle.js
6 | example/bundle.js.map
7 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Cameron Bourke
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | React Hamburger Menu
 2 | =========================
 3 | 
 4 | Built for React, this is a handy UI component for a menu icon in a mobile site or application.
 5 | 
 6 | ## Installation
 7 | 
 8 | react-hamburger-menu requires **React 0.14 or later.**
 9 | 
10 | ```
11 | npm install --save react-hamburger-menu
12 | ```
13 | 
14 | ## Demo & Example
15 | 
16 | Live demo: [cameronbourke.github.io/react-hamburger-menu](http://cameronbourke.github.io/react-hamburger-menu)
17 | 
18 | To build the example locally, clone this repo then run:
19 | 
20 | ```
21 | npm install
22 | npm start
23 | Then open localhost:8080 in a browser.
24 | ```
25 | 
26 | ## Usage
27 | 
28 | React Hamburger Menu only has two required props. They are `isOpen` and `menuClicked`. The other 7 props are optional.
29 | 
30 | #### menuClicked
31 | 
32 | 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:
33 | 
34 | ```js
35 | handleClick() {
36 | 	this.setState({
37 | 		open: !this.state.open
38 | 	});
39 | }
40 | ```
41 | 
42 | An example use of React Hamburger Menu looks like:
43 | 
44 | ```js
45 | <HamburgerMenu
46 | 	isOpen={this.state.open}
47 | 	menuClicked={this.handleClick.bind(this)}
48 | 	width={18}
49 | 	height={15}
50 | 	strokeWidth={1}
51 | 	rotate={0}
52 | 	color='black'
53 | 	borderRadius={0}
54 | 	animationDuration={0.5}
55 | />
56 | ```
57 | 
58 | Note, not all props are required. All the props besides `isOpen` and `menuClicked` have defaults.
59 | 
60 | ## Options
61 | 
62 | Property  | Type | Default | Description
63 | ------------- | ------------- | --------- | ----------
64 | isOpen            | bool   | undefined | determines whether the menu is a hamburger or cross icon
65 | menuClicked       | func   | undefined | will be invoked when the component is clicked
66 | width             | number | 36        | the width of the icon
67 | height            | number | 30        | the height of the icon
68 | strokeWidth       | number | 2         | the stroke width of the lines
69 | rotate            | number | 0         | the rotation of the icon, eg {45} would be `45deg`
70 | color             | string | #000      | the color of both icons
71 | borderRadius      | number | 0         | the border radius of the lines
72 | animationDuration | number | 0.4       | the length of time it takes for the icon transitions to complete.
73 | className					| string | undefined | the class name for the container element
74 | 
75 | ## Todo
76 | 
77 | - Add Unit Tests
78 | 
79 | ## License
80 | 
81 | MIT Licensed Copyright (c) Cameron Bourke 2016
82 | 


--------------------------------------------------------------------------------
/example/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import HamburgerMenu from '../src/HamburgerMenu';
 4 | 
 5 | class App extends React.Component {
 6 | 	constructor() {
 7 | 		super();
 8 | 		this.state = {
 9 | 			open: [false, true, false, true]
10 | 		};
11 |   }
12 | 	handleClick(id) {
13 | 		let { open } = this.state;
14 |     this.setState({
15 | 			open: [...open.slice(0, id), !open[id], ...open.slice(id + 1)]
16 | 		});
17 | 	}
18 | 	render() {
19 | 		return (
20 | 			<div className='menu-row'>
21 | 				<HamburgerMenu
22 | 					isOpen={this.state.open[3]}
23 | 					menuClicked={this.handleClick.bind(this, 3)}
24 | 					width={18}
25 | 					height={15}
26 | 					strokeWidth={1}
27 | 					rotate={0}
28 | 					color='black'
29 | 					borderRadius={0}
30 | 					animationDuration={0.5}
31 | 				/>
32 | 			  <HamburgerMenu
33 | 		      isOpen={this.state.open[0]}
34 | 		      menuClicked={this.handleClick.bind(this, 0)}
35 | 		      width={36}
36 | 					height={30}
37 | 					strokeWidth={2}
38 | 					rotate={0}
39 | 		      color='black'
40 | 					borderRadius={5}
41 | 		      animationDuration={0.3}
42 | 		    />
43 | 				<HamburgerMenu
44 | 					isOpen={this.state.open[1]}
45 | 					menuClicked={this.handleClick.bind(this, 1)}
46 | 					width={54}
47 | 					height={45}
48 | 					strokeWidth={3}
49 | 					rotate={0}
50 | 					color='black'
51 | 					borderRadius={5}
52 | 					animationDuration={0.4}
53 | 				/>
54 | 				<HamburgerMenu
55 | 					isOpen={this.state.open[2]}
56 | 					menuClicked={this.handleClick.bind(this, 2)}
57 | 					width={72}
58 | 					height={60}
59 | 					strokeWidth={3}
60 | 					rotate={0}
61 | 					color='black'
62 | 					borderRadius={5}
63 | 					animationDuration={0.75}
64 | 				/>
65 | 			</div>
66 | 		);
67 | 	}
68 | };
69 | 
70 | ReactDOM.render(<App />, document.getElementById('root'));
71 | 


--------------------------------------------------------------------------------
/example/app.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	margin: 0;
 3 | 	padding: 0;
 4 | }
 5 | 
 6 | #root {
 7 | 	height: 100vh;
 8 | 	width: 100vw;
 9 | 	display: flex;
10 | 	justify-content: center;
11 | 	align-items: center;
12 | }
13 | 
14 | .menu-row {
15 | 	height: 80vh;
16 | 	display: flex;
17 | 	flex-direction: column;
18 | 	justify-content: space-between;
19 | 	align-items: center;
20 | }
21 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <html !DOCTYPE>
 2 | 
 3 | <head>
 4 | 	<link href='app.css' rel='stylesheet' />
 5 | </head>
 6 | 
 7 | <body>
 8 | 	<div id='root'></div>
 9 | 	<script src='bundle.js'></script>
10 | </body>
11 | 
12 | </html>
13 | 


--------------------------------------------------------------------------------
/example/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | module.exports = {
 4 | 	entry: path.join(__dirname, 'App.js'),
 5 | 	output: {
 6 | 		path: __dirname,
 7 | 		filename: 'bundle.js',
 8 | 	},
 9 | 	devtool: 'source-map',
10 | 	module: {
11 | 		rules: [
12 | 			{
13 | 				test: /\.js$/,
14 | 				exclude: /node_modules/,
15 | 				loader: 'babel-loader',
16 | 			}
17 | 		]
18 | 	},
19 | 	resolve: {
20 | 		extensions: ['.json', '.js', '.jsx'],
21 | 	},
22 | };
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-hamburger-menu",
 3 |   "version": "1.2.1",
 4 |   "description": "Dead simple Hamburger Menu to use as a mobile nav, with a bunch of styling options.",
 5 |   "main": "dist/HamburgerMenu.js",
 6 |   "keywords": [
 7 |     "react",
 8 |     "react-component",
 9 |     "menu",
10 |     "hamburger",
11 |     "ui-component",
12 |     "navigation"
13 |   ],
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "https://github.com/cameronbourke/react-hamburger-menu.git"
17 |   },
18 |   "scripts": {
19 |     "start": "webpack-dev-server --content-base example/",
20 |     "build:compile": "babel src --out-dir dist",
21 |     "build:umd": "webpack",
22 |     "build:example": "webpack --config ./example/webpack.config.js --progress --colors",
23 |     "build:all": "yarn run build:compile && yarn run build:umd && yarn run build:example"
24 |   },
25 |   "author": "Cameron Bourke <cameron2295@gmail.com> (http://cameronbourke.com/)",
26 |   "license": "MIT",
27 |   "files": [
28 |     "dist"
29 |   ],
30 |   "devDependencies": {
31 |     "@babel/cli": "^7.0.0-beta.40",
32 |     "@babel/core": "^7.0.0-beta.40",
33 |     "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.40",
34 |     "@babel/preset-env": "^7.0.0-beta.40",
35 |     "@babel/preset-react": "^7.0.0-beta.40",
36 |     "babel-loader": "8.0.0-beta.0",
37 |     "babel-register": "^6.26.0",
38 |     "expect": "1.13.4",
39 |     "np": "6.2.0",
40 |     "prop-types": "15.5.7",
41 |     "react": "15.3.0",
42 |     "react-dom": "15.3.0",
43 |     "tap-spec": "4.1.1",
44 |     "tape": "4.4.0",
45 |     "webpack": "^3.11.0",
46 |     "webpack-dev-server": "^2.11.1"
47 |   },
48 |   "peerDependencies": {
49 |     "prop-types": ">=15.5.7",
50 |     "react": ">=15.3.0"
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/HamburgerMenu.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | export default function HamburgerMenu(props) {
 5 |   const width = `${props.width || 36}px`,
 6 |     height = `${props.height || 30}px`,
 7 |     halfHeight = `${parseInt(height.replace("px", "")) / 2}px`,
 8 |     isOpen = props.isOpen || false,
 9 |     strokeWidth = props.strokeWidth || 2,
10 |     halfStrokeWidth = `-${strokeWidth / 2}px`,
11 |     animationDuration = props.animationDuration || "0.4";
12 | 
13 |   const getTransformValue = (isOpen, defaultPos, rotateVal) =>
14 |     `translate3d(0,${isOpen ? halfHeight : defaultPos},0) rotate(${
15 |       isOpen ? `${rotateVal}deg` : "0"
16 |     })`;
17 | 
18 |   const styles = {
19 |     container: {
20 |       width,
21 |       height,
22 |       position: "relative",
23 |       transform: `rotate(${props.rotate || 0}deg)`
24 |     },
25 |     lineBase: {
26 |       display: "block",
27 |       height: `${strokeWidth}px`,
28 |       width: "100%",
29 |       background: props.color || "#000",
30 |       transitionTimingFunction: "ease",
31 |       transitionDuration: `${animationDuration}s`,
32 |       borderRadius: `${props.borderRadius || 0}px`,
33 |       transformOrigin: "center",
34 |       position: "absolute"
35 |     },
36 |     firstLine: {
37 |       transform: getTransformValue(isOpen, 0, 45),
38 |       marginTop: halfStrokeWidth
39 |     },
40 |     secondLine: {
41 |       transitionTimingFunction: "ease-out",
42 |       transitionDuration: `${animationDuration / 4}s`,
43 |       opacity: isOpen ? "0" : "1",
44 |       top: halfHeight,
45 |       marginTop: halfStrokeWidth
46 |     },
47 |     thirdLine: {
48 |       transform: getTransformValue(isOpen, height, -45),
49 |       marginTop: halfStrokeWidth
50 |     }
51 |   };
52 | 
53 |   return (
54 |     <div
55 |       style={styles.container}
56 |       className={props.className}
57 |       onClick={props.menuClicked}>
58 |       <span style={Object.assign({}, styles.lineBase, styles.firstLine)}></span>
59 |       <span style={Object.assign({}, styles.lineBase, styles.secondLine)}></span>
60 |       <span style={Object.assign({}, styles.lineBase, styles.thirdLine)}></span>
61 |     </div>
62 |   );
63 | }
64 | 
65 | HamburgerMenu.propTypes = {
66 |   isOpen: PropTypes.bool.isRequired,
67 |   menuClicked: PropTypes.func.isRequired,
68 |   width: PropTypes.number,
69 |   height: PropTypes.number,
70 |   strokeWidth: PropTypes.number,
71 |   rotate: PropTypes.number,
72 |   color: PropTypes.string,
73 |   borderRadius: PropTypes.number,
74 |   animationDuration: PropTypes.number,
75 | 	className: PropTypes.string,
76 | };
77 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const path = require('path');
 3 | 
 4 | module.exports = {
 5 | 	entry: path.join(__dirname, 'src/HamburgerMenu.js'),
 6 | 	output: {
 7 | 		path: path.join(__dirname, 'dist'),
 8 | 		filename: 'react-hamburger-menu.min.js',
 9 | 		library: 'ReactHamburgerMenu',
10 | 		libraryTarget: 'umd',
11 | 		umdNamedDefine: true,
12 | 	},
13 | 	module: {
14 | 		rules: [
15 | 			{
16 | 				test: /\.js$/,
17 | 				exclude: /node_modules/,
18 | 				loader: 'babel-loader',
19 | 			}
20 | 		]
21 | 	},
22 | 	resolve: {
23 | 		extensions: ['.json', '.js', '.jsx'],
24 | 	},
25 | 	plugins: [
26 | 		new webpack.optimize.UglifyJsPlugin({
27 | 			minimize: true,
28 | 			compress: {
29 | 				warnings: false,
30 | 			},
31 | 		}),
32 | 	],
33 | };
34 | 
35 | 


--------------------------------------------------------------------------------