react-burger-menu [](https://travis-ci.org/negomi/react-burger-menu)
=================
An off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations.
## Demo & examples
Live demo: [negomi.github.io/react-burger-menu](http://negomi.github.io/react-burger-menu/)
To build the examples locally, run:
```
npm install
npm start
```
Then open [`localhost:8000`](http://localhost:8000) in a browser.
## Tests
The test suite uses [Mocha](http://mochajs.org/), [Chai](http://chaijs.com/) and [Sinon](http://sinonjs.org/), with [jsdom](https://github.com/tmpvar/jsdom).
*You will need at least Node v4.0.0 (or [io.js](https://iojs.org/en/index.html)) to run the tests, due to jsdom depending on it.*
To run the tests once, run:
```
npm test
```
To run them with a watcher, TDD style, run:
```
npm run tdd
```
## Installation
The easiest way to use react-burger-menu is to install it from npm and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).
*WARNING: Elastic and Bubble are not currently supported with Webpack builds due to their Snap.svg dependency.*
You can also use the standalone build by including `dist/react-burger-menu.js` in your page. If you use this, make sure you have already included React, and it is available as a global variable.
If you're using React 0.14+:
```
npm install react-burger-menu --save
```
If you're using React 0.13.3:
```
npm install react-burger-menu@1.1.6 --save
```
## Usage
Items for the sidebar should be passed as child elements of the component using JSX.
*If you're using this component with react-router, check out [this info](https://github.com/negomi/react-burger-menu/wiki/FAQ#why-doesnt-the-link-component-from-react-router-work) in the wiki.*
``` javascript
var Menu = require('react-burger-menu').nameOfAnimation;
var Example = React.createClass({
showSettings: function(event) {
event.preventDefault();
.
.
.
},
render: function() {
return (
);
}
});
```
### Animations
* `slide`
* `stack`
* `elastic`
* `bubble`
* `push`
* `pushRotate`
* `scaleDown`
* `scaleRotate`
* `squeeze`
* `fallDown`
### Properties
Some animations require certain other elements to be on your page:
* **Page wrapper** - an element wrapping the rest of the content on your page, placed after the menu component
``` javascript
.
.
.
```
* **Outer container** - an element containing everything, including the menu component
``` javascript
.
.
.
```
If you are using an animation that requires either/both of these elements, you need to give the element an ID, and pass that ID to the menu component as the `pageWrapId` and `outerContainerId` props respectively.
Check this table to see which animations require these elements:
Animation | `pageWrapId` | `outerContainerId`
--- | :---: | :---:
`slide` | |
`stack` | |
`elastic` | ✓ | ✓
`bubble` | |
`push` | ✓ | ✓
`pushRotate` | ✓ | ✓
`scaleDown` | ✓ | ✓
`scaleRotate` | ✓ | ✓
`squeeze` | ✓ | ✓
`fallDown` | ✓ | ✓
Additionally squeeze animation accepts breakpoint prop, which describes the point in viewport width, where there is no longer desired to content to shrink. Its default value is 960, but this can be controlled:
``
#### Position
The menu opens from the left by default. To have it open from the right, use the `position` prop. It's just a strin with 3 possible values: `left`, `right`, `bottom` so you don't need to specify a value. Then set the position of the button using CSS.
``` javascript
```
#### Width
You can specify the width of the menu (in pixels) with the `width` prop. The default is `300`.
``` javascript
```
#### Height
When used with `position='bottom'` height can be passed to component (default is 350px).
``` javascript
```
#### Open state
You can control whether the sidebar is open or closed with the `isOpen` prop. This is useful if you need to close the menu after a user clicks on an item in it, for example, or if you want to open the menu from some other button in addition to the standard burger icon. The default value is `false`.
``` javascript
```
#### State change
You can detect whether the sidebar is open or closed by passing a callback function to `onStateChange`. The callback will receive an object containing the new state as its first argument.
``` javascript
var isMenuOpen = function(state) {
return state.isOpen;
};
```
#### Close on Escape
By default, the menu will close when the Escape key is pressed. To disable this behavior, you can pass the `disableCloseOnEsc` prop. This is useful in cases where you want the menu to be open all the time, for example if you're implementing a responsive menu that behaves differently depending on the browser width.
``` javascript
```
#### Custom `window.onkeydown` handler
For more control over global keypress functionality, you can override the handler that this component sets for `window.onkeydown`, and pass a custom function. This could be useful if you are using multiple instances of this component, for example, and want to implement functionality to ensure that a single press of the Escape key closes them all.
``` javascript
const closeAllMenusOnEsc = (e) => {
e = e || window.event;
if (e.key === 'Escape' || e.keyCode === 27) {
this.setState({areMenusOpen: false});
}
};
// Because we can only set one window.onkeydown handler, the last menu you include will override any handlers set by previous ones.
// For that reason, it's recommended that you pass the same function to all menus to avoid unexpected behavior.
```
*Note: Using this prop will disable all the default 'close on Escape' functionality, so you will need to handle this (including determining which key was pressed) yourself.*
#### Overlay
You can turn off the default overlay with `noOverlay`.
``` javascript
```
#### Custom icons
You can replace the default bars that make up the burger and cross icons with custom `ReactElement`s. Pass them as the `customBurgerIcon` and `customCrossIcon` props respectively.
```javascript
} />
} />
```
You should adjust their size using the `.bm-burger-button` and `.bm-cross-button` classes, but the element itself will have the class `.bm-icon` or `.bm-cross` if you need to access it directly.
You can also disable the icon elements so they won't be included at all, by passing `false` to these props.
```javascript
```
This can be useful if you want exclusive external control of the menu, using the `isOpen` prop.
#### Custom ID
There is also an optional `id` prop, which will simply add an ID to the rendered menu's outermost element. This is not required for any functionality.
``` javascript
```
### Styling
All the animations are handled internally by the component. However, the visual styles (colors, fonts etc.) are not, and need to be supplied, either with CSS or with a JavaScript object passed as the `styles` prop.
#### CSS
The component has the following helper classes:
``` css
/* Position and sizing of burger button */
.bm-burger-button {
position: fixed;
width: 36px;
height: 30px;
left: 36px;
top: 36px;
}
/* Color/shape of burger icon bars */
.bm-burger-bars {
background: #373a47;
}
/* Position and sizing of clickable cross button */
.bm-cross-button {
height: 24px;
width: 24px;
}
/* Color/shape of close button cross */
.bm-cross {
background: #bdc3c7;
}
/* General sidebar styles */
.bm-menu {
background: #373a47;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
}
/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
fill: #373a47;
}
/* Wrapper for item list */
.bm-item-list {
color: #b8b7ad;
padding: 0.8em;
}
/* Styling of overlay */
.bm-overlay {
background: rgba(0, 0, 0, 0.3);
}
```
#### JavaScript
The same styles can be written as a JavaScript object like this:
```javascript
var styles = {
bmBurgerButton: {
position: 'fixed',
width: '36px',
height: '30px',
left: '36px',
top: '36px'
},
bmBurgerBars: {
background: '#373a47'
},
bmCrossButton: {
height: '24px',
width: '24px'
},
bmCross: {
background: '#bdc3c7'
},
bmMenu: {
background: '#373a47',
padding: '2.5em 1.5em 0',
fontSize: '1.15em'
},
bmMorphShape: {
fill: '#373a47'
},
bmItemList: {
color: '#b8b7ad',
padding: '0.8em'
},
bmOverlay: {
background: 'rgba(0, 0, 0, 0.3)'
}
}
```
```
```
### Server-side rendering
This component uses [Radium](https://github.com/FormidableLabs/radium) to manage its internal styles, which also handles vendor prefixing. In universal/isomorphic applications, you need to pass the user agent to the component via the [`radiumConfig`](https://github.com/FormidableLabs/radium/tree/master/docs/api#configuseragent) prop so Radium knows which prefixes to apply.
This is an example of how that would look using Express:
```javascript
```
### Browser support
Because this project uses CSS3 features, it's only meant for modern browsers. Some browsers currently fail to apply some of the animations correctly.
Chrome and Firefox have full support, but Safari and IE have strange behavior for some of the menus.
### Help
Check the FAQ (https://github.com/negomi/react-burger-menu/wiki/FAQ) to see if your question has been answered already, or [open a new issue](https://github.com/negomi/react-burger-menu/issues).
### License
MIT
### Updating and publishing npm package
https://docs.npmjs.com/getting-started/publishing-npm-packages
After the package get published for the first time, further updates are being done as follows:
- `npm run build` to build package for publishing
- commit all changes to git, which will clear the project tree
- `npm version patch` for small changes (this should be done in semver way - https://docs.npmjs.com/getting-started/semantic-versioning, 3 options here are: `major`, `minor`, `patch`, )
- `npm publish` (this creates new tag in git)