{"_id":"@5igm4/burger","_rev":"4-a76f27449c3fec89f017edb751ffd259","name":"@5igm4/burger","description":"An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@5igm4/burger","version":"1.0.0","description":"An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations","main":"lib/BurgerMenu.js","author":{"name":"Imogen Wentworth"},"dependencies":{"browserify-optional":"^1.0.0","classnames":"^2.1.1","eve":"~0.4.2","radium":"^0.18.0","snapsvg-cjs":"0.0.4"},"devDependencies":{"babel-core":"^6.3.26","babel-eslint":"^7.0.0","babel-preset-es2015":"^6.3.13","babel-preset-react":"^6.3.13","babel-register":"^6.3.13","chai":"^3.2.0","eslint":"^3.0.0","eslint-plugin-react":"^6.0.0","gulp":"^3.8.11","gulp-git":"^1.8.0","gulp-mocha":"^3.0.0","jsdom":"^9.0.0","mocha":"^3.0.0","react":"^15.4.1","react-addons-test-utils":"^15.0.0","react-component-gulp-tasks":"^0.7.1","react-dom":"^15.4.1","sinon":"^1.16.1"},"peerDependencies":{"react":">=0.14.0 <16.0.0","react-dom":">=0.14.0 <16.0.0"},"browserify":{"transform":["browserify-optional"]},"browserify-shim":{"react":"global:React","react-dom":"global:ReactDOM","radium":"global:Radium","snapsvg":"global:Snap"},"scripts":{"build":"gulp clean && NODE_ENV=production gulp build","examples":"gulp dev:server","lint":"eslint ./; true","publish:site":"gulp publish:examples","publish:version":"gulp commit:version && gulp push","start":"gulp dev","test":"gulp test --reporter list","tdd":"gulp watch:tests --reporter min","watch":"gulp watch:lib","release":"npm run build && gulp bump && npm run publish:version && gulp release","release:minor":"npm run build && gulp bump:minor && npm run publish:version && gulp release","release:major":"npm run build && gulp bump:major && npm run publish:version && gulp release"},"engines":{"node":">=4.0.0"},"keywords":["component","hamburger","menu","react","react-component"],"license":"MIT","directories":{"example":"example","test":"test"},"repository":{"type":"git","url":"git+https://github.com/5igm4/5igm4-Burger-Menu-Modification.git"},"bugs":{"url":"https://github.com/5igm4/5igm4-Burger-Menu-Modification/issues"},"homepage":"https://github.com/5igm4/5igm4-Burger-Menu-Modification#readme","gitHead":"d555b8c94dc83bd446a1ad7d68c90b0e4b97d8dd","_id":"@5igm4/burger@1.0.0","_shasum":"f53731298d442bbe9fd223c819ad9390448a9865","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.4","_npmUser":{"name":"5igm4","email":"roberttorgov@gmail.com"},"dist":{"shasum":"f53731298d442bbe9fd223c819ad9390448a9865","tarball":"https://registry.npmjs.org/@5igm4/burger/-/burger-1.0.0.tgz","integrity":"sha512-usL0on7PB0kut7JH6ekIJm+cnkO15wu0OMxn3SNuz/Thr+GDyPuon1/RIYJ6ihp7zYKQi3PdvmDciB8h4DRXRQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQlxq8w7oPZq0a0moj7RF/e2qoK69NwL77meYfqK4t7AiBt0Cc5pIRPKIh1Haj8tNVTX1jbmdjB03oAEbE86c8kTA=="}]},"maintainers":[{"name":"5igm4","email":"roberttorgov@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/burger-1.0.0.tgz_1486397623194_0.6851065254304558"}},"1.0.1":{"name":"@5igm4/burger","version":"1.0.1","description":"An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations","main":"lib/BurgerMenu.js","author":{"name":"Imogen Wentworth"},"dependencies":{"browserify-optional":"^1.0.0","classnames":"^2.1.1","eve":"~0.4.2","radium":"^0.18.0","snapsvg-cjs":"0.0.4"},"devDependencies":{"babel-core":"^6.3.26","babel-eslint":"^7.0.0","babel-preset-es2015":"^6.3.13","babel-preset-react":"^6.3.13","babel-register":"^6.3.13","chai":"^3.2.0","eslint":"^3.0.0","eslint-plugin-react":"^6.0.0","gulp":"^3.8.11","gulp-git":"^1.8.0","gulp-mocha":"^3.0.0","jsdom":"^9.0.0","mocha":"^3.0.0","react":"^15.4.1","react-addons-test-utils":"^15.0.0","react-component-gulp-tasks":"^0.7.1","react-dom":"^15.4.1","sinon":"^1.16.1"},"peerDependencies":{"react":">=0.14.0 <16.0.0","react-dom":">=0.14.0 <16.0.0"},"browserify":{"transform":["browserify-optional"]},"browserify-shim":{"react":"global:React","react-dom":"global:ReactDOM","radium":"global:Radium","snapsvg":"global:Snap"},"scripts":{"build":"gulp clean && NODE_ENV=production gulp build","examples":"gulp dev:server","lint":"eslint ./; true","publish:site":"gulp publish:examples","publish:version":"gulp commit:version && gulp push","start":"gulp dev","test":"gulp test --reporter list","tdd":"gulp watch:tests --reporter min","watch":"gulp watch:lib","release":"npm run build && gulp bump && npm run publish:version && gulp release","release:minor":"npm run build && gulp bump:minor && npm run publish:version && gulp release","release:major":"npm run build && gulp bump:major && npm run publish:version && gulp release"},"engines":{"node":">=4.0.0"},"keywords":["component","hamburger","menu","react","react-component"],"license":"MIT","directories":{"example":"example","test":"test"},"repository":{"type":"git","url":"git+https://github.com/5igm4/5igm4-Burger-Menu-Modification.git"},"bugs":{"url":"https://github.com/5igm4/5igm4-Burger-Menu-Modification/issues"},"homepage":"https://github.com/5igm4/5igm4-Burger-Menu-Modification#readme","gitHead":"d555b8c94dc83bd446a1ad7d68c90b0e4b97d8dd","_id":"@5igm4/burger@1.0.1","_shasum":"19dbebc55112a862a4ffa8b80850c3bcddb78d04","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.4","_npmUser":{"name":"5igm4","email":"roberttorgov@gmail.com"},"dist":{"shasum":"19dbebc55112a862a4ffa8b80850c3bcddb78d04","tarball":"https://registry.npmjs.org/@5igm4/burger/-/burger-1.0.1.tgz","integrity":"sha512-6K29oT+2lZU8mn3opze6JRy/wfZtDP1taVbXl5RNmWj3eNLMq2VnCmH/abafzkUhFQFEUX7HvQP/rw0JfTcL1w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICRPWMEwU4oriE0GO4RKFguXFppoLZ6uTyr0vArzD/H7AiBQ8ouYnYPzG+7yB5J7ngTssHO+FehfuBYjiEZe6cii2w=="}]},"maintainers":[{"name":"5igm4","email":"roberttorgov@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/burger-1.0.1.tgz_1486483239599_0.37928265519440174"}},"1.0.2":{"name":"@5igm4/burger","version":"1.0.2","description":"An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations","main":"lib/BurgerMenu.js","author":{"name":"Imogen Wentworth"},"dependencies":{"browserify-optional":"^1.0.0","classnames":"^2.1.1","eve":"~0.4.2","radium":"^0.18.0","snapsvg-cjs":"0.0.4"},"devDependencies":{"babel-core":"^6.3.26","babel-eslint":"^7.0.0","babel-preset-es2015":"^6.3.13","babel-preset-react":"^6.3.13","babel-register":"^6.3.13","chai":"^3.2.0","eslint":"^3.0.0","eslint-plugin-react":"^6.0.0","gulp":"^3.8.11","gulp-git":"^1.8.0","gulp-mocha":"^3.0.0","jsdom":"^9.0.0","mocha":"^3.0.0","react":"^15.4.1","react-addons-test-utils":"^15.0.0","react-component-gulp-tasks":"^0.7.1","react-dom":"^15.4.1","sinon":"^1.16.1"},"peerDependencies":{"react":">=0.14.0 <16.0.0","react-dom":">=0.14.0 <16.0.0"},"browserify":{"transform":["browserify-optional"]},"browserify-shim":{"react":"global:React","react-dom":"global:ReactDOM","radium":"global:Radium","snapsvg":"global:Snap"},"scripts":{"build":"gulp clean && NODE_ENV=production gulp build","examples":"gulp dev:server","lint":"eslint ./; true","publish:site":"gulp publish:examples","publish:version":"gulp commit:version && gulp push","start":"gulp dev","test":"gulp test --reporter list","tdd":"gulp watch:tests --reporter min","watch":"gulp watch:lib","release":"npm run build && gulp bump && npm run publish:version && gulp release","release:minor":"npm run build && gulp bump:minor && npm run publish:version && gulp release","release:major":"npm run build && gulp bump:major && npm run publish:version && gulp release"},"engines":{"node":">=4.0.0"},"keywords":["component","hamburger","menu","react","react-component"],"license":"MIT","directories":{"example":"example","test":"test"},"repository":{"type":"git","url":"git+https://github.com/5igm4/5igm4-Burger-Menu-Modification.git"},"bugs":{"url":"https://github.com/5igm4/5igm4-Burger-Menu-Modification/issues"},"homepage":"https://github.com/5igm4/5igm4-Burger-Menu-Modification#readme","gitHead":"d555b8c94dc83bd446a1ad7d68c90b0e4b97d8dd","_id":"@5igm4/burger@1.0.2","_shasum":"1f48def3495cf4735bc76c15a08faeff68bb4f3c","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.4","_npmUser":{"name":"5igm4","email":"roberttorgov@gmail.com"},"dist":{"shasum":"1f48def3495cf4735bc76c15a08faeff68bb4f3c","tarball":"https://registry.npmjs.org/@5igm4/burger/-/burger-1.0.2.tgz","integrity":"sha512-7sDo536e2vJSI8tLXhIPkLf/lI7pXs6mWgAVOP5MdyvyxKazR/Jy7NKbSCcE4UkK+iUqdBbMxQ+/dgImXA/UAw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLqtkaAdz2JMKpoV5s7jI+lXT0vQK2cUlL1i8bwvADwAiAMhkMYn2dQJNCAzyFTsyfd9NS24H2QgY0Y4pkW0JL8MQ=="}]},"maintainers":[{"name":"5igm4","email":"roberttorgov@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/burger-1.0.2.tgz_1487978788952_0.9886297218035907"}}},"readme":"react-burger-menu [![Build Status](https://travis-ci.org/negomi/react-burger-menu.svg?branch=master)](https://travis-ci.org/negomi/react-burger-menu)\n=================\n\nAn off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations.\n\n*Using Redux? Check out [redux-burger-menu](https://github.com/negomi/redux-burger-menu) for easy integration of react-burger-menu into your project.*\n\n## Demo & examples\n\nLive demo: [negomi.github.io/react-burger-menu](http://negomi.github.io/react-burger-menu/)\n\nTo build the examples locally, run:\n\n```\nnpm install\nnpm start\n```\n\nThen open [`localhost:8000`](http://localhost:8000) in a browser.\n\n## Tests\n\nThe test suite uses [Mocha](http://mochajs.org/), [Chai](http://chaijs.com/) and [Sinon](http://sinonjs.org/), with [jsdom](https://github.com/tmpvar/jsdom).\n\n*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.*\n\nTo run the tests once, run:\n\n```\nnpm test\n```\n\nTo run them with a watcher, TDD style, run:\n\n```\nnpm run tdd\n```\n\n## Installation\n\nThe 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).\n\nYou 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.\n\nIf you're using React 0.14+:\n\n```\nnpm install react-burger-menu --save\n```\n\nIf you're using React 0.13.3:\n\n```\nnpm install react-burger-menu@1.1.6 --save\n```\n\n## Usage\n\nItems for the sidebar should be passed as child elements of the component using JSX.\n\n*If you're using this component with react-router, or want to include other custom components inside the menu, check out [this](https://github.com/negomi/react-burger-menu/wiki/FAQ#why-doesnt-the-link-component-from-react-router-work) and [this](https://github.com/negomi/react-burger-menu/wiki/FAQ#i-want-to-use-custom-components-inside-my-menu-but-this-breaks-firefox) in the wiki.*\n\n``` javascript\nvar Menu = require('react-burger-menu').nameOfAnimation;\n\nvar Example = React.createClass({\n  showSettings: function(event) {\n    event.preventDefault();\n    .\n    .\n    .\n  },\n  render: function() {\n    return (\n      <Menu>\n        <a id=\"home\" className=\"menu-item\" href=\"/\">Home</a>\n        <a id=\"about\" className=\"menu-item\" href=\"/about\">About</a>\n        <a id=\"contact\" className=\"menu-item\" href=\"/contact\">Contact</a>\n        <a onClick={ this.showSettings } className=\"menu-item--small\" href=\"\">Settings</a>\n      </Menu>\n    );\n  }\n});\n\n```\n\n### Animations\n\n* `slide`\n* `stack`\n* `elastic`\n* `bubble`\n* `push`\n* `pushRotate`\n* `scaleDown`\n* `scaleRotate`\n* `fallDown`\n\n### Properties\n\nSome animations require certain other elements to be on your page:\n\n* **Page wrapper** - an element wrapping the rest of the content on your page (except elements with fixed positioning - see [the wiki](https://github.com/negomi/react-burger-menu/wiki/FAQ#i-have-a-fixed-header-but-its-scrolling-with-the-rest-of-the-page-when-i-open-the-menu) for details), placed after the menu component\n\n  ``` javascript\n  <Menu pageWrapId={ \"page-wrap\" } />\n  <main id=\"page-wrap\">\n    .\n    .\n    .\n  </main>\n  ```\n\n* **Outer container** - an element containing everything, including the menu component\n  ``` javascript\n  <div id=\"outer-container\">\n    <Menu pageWrapId={ \"page-wrap\" } outerContainerId={ \"outer-container\" } />\n    <main id=\"page-wrap\">\n      .\n      .\n      .\n    </main>\n  </div>\n  ```\n\nIf 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.\n\nCheck this table to see which animations require these elements:\n\nAnimation | `pageWrapId` | `outerContainerId`\n--- | :---: | :---:\n`slide` | |\n`stack` | |\n`elastic` | &#x2713; | &#x2713;\n`bubble` | |\n`push` | &#x2713; | &#x2713;\n`pushRotate` |  &#x2713;  |  &#x2713;\n`scaleDown` |  &#x2713;  |  &#x2713;\n`scaleRotate` |  &#x2713;  |  &#x2713;\n`fallDown` |  &#x2713;  |  &#x2713;\n\n#### Position\n\nThe menu opens from the left by default. To have it open from the right, use the `right` prop. It's just a boolean so you don't need to specify a value. Then set the position of the button using CSS.\n\n``` javascript\n<Menu right />\n```\n\n#### Width\n\nYou can specify the width of the menu (in pixels) with the `width` prop. The default is `300`.\n\n``` javascript\n<Menu width={ 280 } />\n```\n\n#### Open state\n\nYou 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`.\n\n``` javascript\n// To render the menu open\n<Menu isOpen />\n<Menu isOpen={ true } />\n\n// To render the menu closed\n<Menu isOpen={ false } />\n```\n\n*If you want to render the menu open initially, you will need to set this property in your parent component's `componentDidMount()` function.*\n\n#### State change\n\nYou 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.\n\n``` javascript\nvar isMenuOpen = function(state) {\n  return state.isOpen;\n};\n\n<Menu onStateChange={ isMenuOpen } />\n```\n\n#### Overlay\n\nYou can turn off the default overlay with `noOverlay`.\n\n``` javascript\n<Menu noOverlay />\n```\n\n#### Custom icons\n\nYou 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.\n\n```javascript\n<Menu customBurgerIcon={ <img src=\"img/icon.svg\" /> } />\n<Menu customCrossIcon={ <img src=\"img/cross.svg\" /> } />\n```\n\nYou 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.\n\nYou can also disable the icon elements so they won't be included at all, by passing `false` to these props.\n\n```javascript\n<Menu customBurgerIcon={ false } />\n<Menu customCrossIcon={ false } />\n```\n\nThis can be useful if you want exclusive external control of the menu, using the `isOpen` prop.\n\n#### Custom ID\n\nThere 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.\n\n``` javascript\n<Menu id={ \"sidebar\" } />\n```\n\n### Styling\n\nAll 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.\n\n#### CSS\n\nThe component has the following helper classes:\n\n``` css\n/* Position and sizing of burger button */\n.bm-burger-button {\n  position: fixed;\n  width: 36px;\n  height: 30px;\n  left: 36px;\n  top: 36px;\n}\n\n/* Color/shape of burger icon bars */\n.bm-burger-bars {\n  background: #373a47;\n}\n\n/* Position and sizing of clickable cross button */\n.bm-cross-button {\n  height: 24px;\n  width: 24px;\n}\n\n/* Color/shape of close button cross */\n.bm-cross {\n  background: #bdc3c7;\n}\n\n/* General sidebar styles */\n.bm-menu {\n  background: #373a47;\n  padding: 2.5em 1.5em 0;\n  font-size: 1.15em;\n}\n\n/* Morph shape necessary with bubble or elastic */\n.bm-morph-shape {\n  fill: #373a47;\n}\n\n/* Wrapper for item list */\n.bm-item-list {\n  color: #b8b7ad;\n  padding: 0.8em;\n}\n\n/* Styling of overlay */\n.bm-overlay {\n  background: rgba(0, 0, 0, 0.3);\n}\n```\n\n#### JavaScript\n\nThe same styles can be written as a JavaScript object like this:\n\n```javascript\nvar styles = {\n  bmBurgerButton: {\n    position: 'fixed',\n    width: '36px',\n    height: '30px',\n    left: '36px',\n    top: '36px'\n  },\n  bmBurgerBars: {\n    background: '#373a47'\n  },\n  bmCrossButton: {\n    height: '24px',\n    width: '24px'\n  },\n  bmCross: {\n    background: '#bdc3c7'\n  },\n  bmMenu: {\n    background: '#373a47',\n    padding: '2.5em 1.5em 0',\n    fontSize: '1.15em'\n  },\n  bmMorphShape: {\n    fill: '#373a47'\n  },\n  bmItemList: {\n    color: '#b8b7ad',\n    padding: '0.8em'\n  },\n  bmOverlay: {\n    background: 'rgba(0, 0, 0, 0.3)'\n  }\n}\n\n<Menu styles={ styles } />\n```\n\n### Server-side rendering\n\nThis 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.\n\nThis is an example of how that would look using Express:\n\n```javascript\n<Menu radiumConfig={{ userAgent: req.headers['user-agent'] }} />\n```\n\nIf you're not terribly concerned with memory/data usage and for some reason can't provide the user agent (for example, your application sits behind a CDN or other proxy), you can specify the user agent `'all'` to use all vendor prefixes.\n\n```javascript\n<Menu radiumConfig={{ userAgent: 'all' }} />\n```\n\n### Browser support\n\nBecause this project uses CSS3 features, it's only meant for modern browsers. Some browsers currently fail to apply some of the animations correctly.\n\nChrome and Firefox have full support, but Safari and IE have strange behavior for some of the menus.\n\n### Help\n\nCheck 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).\n\n### License\n\nMIT\n","maintainers":[{"name":"5igm4","email":"roberttorgov@gmail.com"}],"time":{"modified":"2022-06-12T14:11:28.463Z","created":"2017-02-06T16:13:45.339Z","1.0.0":"2017-02-06T16:13:45.339Z","1.0.1":"2017-02-07T16:00:40.223Z","1.0.2":"2017-02-24T23:26:29.659Z"},"homepage":"https://github.com/5igm4/5igm4-Burger-Menu-Modification#readme","keywords":["component","hamburger","menu","react","react-component"],"repository":{"type":"git","url":"git+https://github.com/5igm4/5igm4-Burger-Menu-Modification.git"},"author":{"name":"Imogen Wentworth"},"bugs":{"url":"https://github.com/5igm4/5igm4-Burger-Menu-Modification/issues"},"license":"MIT","readmeFilename":"README.md"}