diff --git a/README.md b/README.md index e6b2d89..1c2d315 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # react-css-burger [![NPM](https://img.shields.io/npm/v/react-css-burger.svg)](https://www.npmjs.com/package/react-css-burger) [![Build Status](https://travis-ci.org/mattvox/react-css-burger.svg?branch=master)](https://travis-ci.org/mattvox/react-css-burger) [![Coverage Status](https://coveralls.io/repos/github/mattvox/react-css-burger/badge.svg?branch=master)](https://coveralls.io/github/mattvox/react-css-burger?branch=master) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) -Lightweight, dynamic, zero-dependency (and very tasty) burger for React. +Lightweight, dynamic, zero-dependency (and very tasty) burger for React and Gatsby. ## Examples @@ -9,13 +9,13 @@ Check out the live demo: [https://mattvox.github.io/react-css-burger](https://ma ## Install ```bash -yarn add react-css-burger +yarn add @lifeeric/react-css-burger ``` Or with npm ```bash -npm install --save react-css-burger +npm install --save @lifeeric/react-css-burger ``` ## Usage @@ -27,11 +27,11 @@ This delicious burger uses sensible defaults, so only minimal configuration via Renders a basic, "boring" burger ```jsx -import Burger from 'react-css-burger'; +import Burger from "@lifeeric/react-css-burger"; class App extends Component { state = { - active: false, + active: false }; render() { @@ -50,11 +50,11 @@ class App extends Component { Renders a burger with the "arrow" animation, in pink, with a hover opacity of 80%, at 120% scale. ```jsx -import Burger from 'react-css-burger'; +import Burger from "@lifeeric/react-css-burger"; class App extends Component { state = { - active: false, + active: false }; render() { @@ -76,37 +76,37 @@ class App extends Component { Burger animations are set with the `burger` prop. To see all the available animations in action, please check out the live demo at [https://mattvox.github.io/react-css-burger](https://mattvox.github.io/react-css-burger). The default animation is "boring", although this can be substituted for any one of the following strings values: -* `arrow` -* `arrowalt` -* `arrowturn` -* `boring` -* `collapse` -* `elastic` -* `emphatic` -* `minus` -* `slider` -* `spin` -* `spring` -* `squeeze` -* `stand` -* `vortex` -* `3dx` -* `3dy` -* `3dxy` +- `arrow` +- `arrowalt` +- `arrowturn` +- `boring` +- `collapse` +- `elastic` +- `emphatic` +- `minus` +- `slider` +- `spin` +- `spring` +- `squeeze` +- `stand` +- `vortex` +- `3dx` +- `3dy` +- `3dxy` ### Props React CSS Burger uses CSS Variables to provide a dynamic experience, ensuring the perfect, and most delicious burger for every situation. All properties are optional, although `active` must be used to toggle the burger's state. -* `active` - Boolean - toggles the burger state (see above example) -* `onClick` - Function - usually used to toggle the burger's state (see above example) -* `burger` - String - sets the specific animation (see animations above) -* `color` - String - sets the burger's color value (ie. 'pink' or '#AD2E74') -* `hoverOpacity` - Number - sets the opacity when hovered (ie. 0.8) -* `marginTop` - String - sets the burger's margin-top (ie. '25px') -* `marginTop` - String - sets the burger's margin-left (ie. '25px') -* `scale` - Number - sets the burger's scale value (ie. 1.25) -* `style` - Object - style object is passed through to allow for custom styling (YMMV) +- `active` - Boolean - toggles the burger state (see above example) +- `onClick` - Function - usually used to toggle the burger's state (see above example) +- `burger` - String - sets the specific animation (see animations above) +- `color` - String - sets the burger's color value (ie. 'pink' or '#AD2E74') +- `hoverOpacity` - Number - sets the opacity when hovered (ie. 0.8) +- `marginTop` - String - sets the burger's margin-top (ie. '25px') +- `marginTop` - String - sets the burger's margin-left (ie. '25px') +- `scale` - Number - sets the burger's scale value (ie. 1.25) +- `style` - Object - style object is passed through to allow for custom styling (YMMV) ## Browser Support @@ -114,9 +114,9 @@ React CSS Burger utilizes modern CSS3 features, such as CSS variables, and is on ## Similar Projects -* [react-burgers](https://www.npmjs.com/package/react-burgers) -* [react-animated-burgers](https://www.npmjs.com/package/react-animated-burgers) -* [react-burger-king](https://www.npmjs.com/package/react-burger-king) +- [react-burgers](https://www.npmjs.com/package/react-burgers) +- [react-animated-burgers](https://www.npmjs.com/package/react-animated-burgers) +- [react-burger-king](https://www.npmjs.com/package/react-burger-king) Not using React? Check out the project this one is based on: [Jonathan Suh's Hamburgers](https://jonsuh.com/hamburgers/) @@ -126,4 +126,4 @@ This component is heavily inspired by [Jonathan Suh's Hamburgers](https://jonsuh ## License -MIT © [mattvox](https://github.com/mattvox) +MIT © [mattvox](https://ericgit.me) diff --git a/example/yarn.lock b/example/yarn.lock index c476c02..dff7ccc 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -89,10 +89,6 @@ alphanum-sort@^1.0.1, alphanum-sort@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3" -amdefine@>=0.0.4: - version "1.0.1" - resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" - ansi-align@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f" @@ -286,7 +282,7 @@ async-each@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d" -async@^1.4.0, async@^1.5.2: +async@^1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" @@ -1047,8 +1043,8 @@ bluebird@^3.4.7: resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9" bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0: - version "4.11.8" - resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f" + version "4.11.9" + resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828" body-parser@1.18.2: version "1.18.2" @@ -1552,7 +1548,7 @@ compressible@~2.0.13: compression@^1.5.2: version "1.7.2" - resolved "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz#aaffbcd6aaf854b44ebb280353d5ad1651f59a69" + resolved "https://registry.npmjs.org/compression/-/compression-1.7.2.tgz#aaffbcd6aaf854b44ebb280353d5ad1651f59a69" dependencies: accepts "~1.3.4" bytes "3.0.0" @@ -2118,8 +2114,8 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.48.tgz#d3b0d8593814044e092ece2108fc3ac9aea4b900" elliptic@^6.0.0: - version "6.4.0" - resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df" + version "6.5.3" + resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6" dependencies: bn.js "^4.4.0" brorand "^1.0.1" @@ -3012,14 +3008,15 @@ handle-thing@^1.2.5: resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4" handlebars@^4.0.3: - version "4.0.11" - resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc" + version "4.7.6" + resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.6.tgz#d4c05c1baf90e9945f77aa68a7a219aa4a7df74e" dependencies: - async "^1.4.0" - optimist "^0.6.1" - source-map "^0.4.4" + minimist "^1.2.5" + neo-async "^2.6.0" + source-map "^0.6.1" + wordwrap "^1.0.0" optionalDependencies: - uglify-js "^2.6" + uglify-js "^3.1.4" har-schema@^2.0.0: version "2.0.0" @@ -3095,11 +3092,11 @@ hash-base@^3.0.0: safe-buffer "^5.0.1" hash.js@^1.0.0, hash.js@^1.0.3: - version "1.1.3" - resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846" + version "1.1.7" + resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42" dependencies: inherits "^2.0.3" - minimalistic-assert "^1.0.0" + minimalistic-assert "^1.0.1" he@1.1.x: version "1.1.1" @@ -3310,14 +3307,18 @@ inflight@^1.0.4: once "^1.3.0" wrappy "1" -inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" +inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3: + version "2.0.4" + resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" inherits@2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1" +inherits@2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" + ini@^1.3.4, ini@~1.3.0: version "1.3.5" resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" @@ -4419,7 +4420,7 @@ mimic-fn@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022" -minimalistic-assert@^1.0.0: +minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" @@ -4443,13 +4444,9 @@ minimist@0.0.8: version "0.0.8" resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" -minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" - -minimist@~0.0.1: - version "0.0.10" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf" +minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5: + version "1.2.5" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" minipass@^2.2.1, minipass@^2.3.3: version "2.3.3" @@ -4533,9 +4530,9 @@ negotiator@0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9" -neo-async@^2.5.0: - version "2.5.1" - resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.5.1.tgz#acb909e327b1e87ec9ef15f41b8a269512ad41ee" +neo-async@^2.5.0, neo-async@^2.6.0: + version "2.6.2" + resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f" next-tick@1: version "1.0.0" @@ -4774,13 +4771,6 @@ opn@^5.1.0: dependencies: is-wsl "^1.1.0" -optimist@^0.6.1: - version "0.6.1" - resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686" - dependencies: - minimist "~0.0.1" - wordwrap "~0.0.2" - optionator@^0.8.1, optionator@^0.8.2: version "0.8.2" resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64" @@ -5500,8 +5490,7 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7: strip-json-comments "~2.0.1" "react-css-burger@link:..": - version "0.0.0" - uid "" + version "0.2.0" react-dev-utils@^5.0.1: version "5.0.1" @@ -6179,12 +6168,6 @@ source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, sourc version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" -source-map@^0.4.4: - version "0.4.4" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b" - dependencies: - amdefine ">=0.0.4" - source-map@^0.6.1, source-map@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" @@ -6613,7 +6596,7 @@ uglify-js@3.3.x, uglify-js@^3.0.13: commander "~2.15.0" source-map "~0.6.1" -uglify-js@^2.6, uglify-js@^2.8.29: +uglify-js@^2.8.29: version "2.8.29" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd" dependencies: @@ -6622,6 +6605,10 @@ uglify-js@^2.6, uglify-js@^2.8.29: optionalDependencies: uglify-to-browserify "~1.0.0" +uglify-js@^3.1.4: + version "3.11.0" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.11.0.tgz#67317658d76c21e0e54d3224aee2df4ee6c3e1dc" + uglify-to-browserify@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7" @@ -6929,8 +6916,8 @@ websocket-driver@>=0.5.1: websocket-extensions ">=0.1.1" websocket-extensions@>=0.1.1: - version "0.1.3" - resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29" + version "0.1.4" + resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42" whatwg-encoding@^1.0.1: version "1.0.3" @@ -6991,11 +6978,7 @@ wordwrap@0.0.2: version "0.0.2" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f" -wordwrap@~0.0.2: - version "0.0.3" - resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107" - -wordwrap@~1.0.0: +wordwrap@^1.0.0, wordwrap@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" diff --git a/package.json b/package.json index f8d3c07..dbccb70 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "name": "react-css-burger", - "version": "0.2.0", + "name": "@lifeeric/react-css-burger", + "version": "0.2.1", "description": "Lightweight, dynamic, zero-dependency (and very tasty) burger for React.", "author": "Matthew Bliffert", "license": "MIT", - "repository": "mattvox/react-css-burger", + "repository": "@lifeeric/react-css-burger", "main": "dist/index.js", "module": "dist/index.es.js", "jsnext:main": "dist/index.es.js", @@ -20,9 +20,9 @@ "deploy": "gh-pages -d example/build", "coveralls": "cat ./coverage/lcov.info | node node_modules/.bin/coveralls" }, - "homepage": "https://github.com/mattvox/react-css-burger", + "homepage": "https://github.com/lifeeric/react-css-burger", "bugs": { - "url": "https://github.com/mattvox/react-css-burger/issues" + "url": "https://github.com/lifeeric/react-css-burger/issues" }, "keywords": [ "component", diff --git a/src/components/Burger/index.js b/src/components/Burger/index.js index 45c3683..542c8f0 100644 --- a/src/components/Burger/index.js +++ b/src/components/Burger/index.js @@ -1,10 +1,10 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React from "react"; +import PropTypes from "prop-types"; -import css from './burger.css'; +import css from "./burger.css"; const Burger = props => { - const root = document.documentElement; + const root = typeof document !== "undefined" ? document.documentElement : ""; const { active, onClick, @@ -14,20 +14,22 @@ const Burger = props => { scale, marginTop, marginLeft, - style, + style } = props; - root.style.setProperty('--burger-color', color); - root.style.setProperty('--burger-opacity-hover', hoverOpacity); - root.style.setProperty('--burger-scale', scale); - root.style.setProperty('--burger-margin-top', marginTop); - root.style.setProperty('--burger-margin-left', marginLeft); + if (root) { + root.style.setProperty("--burger-color", color); + root.style.setProperty("--burger-opacity-hover", hoverOpacity); + root.style.setProperty("--burger-scale", scale); + root.style.setProperty("--burger-margin-top", marginTop); + root.style.setProperty("--burger-margin-left", marginLeft); + } const classes = { - burger: `${css['hamburger']} ${css[`hamburger--${burger}`]}`, - box: `${css['hamburger-box']}`, - inner: `${css['hamburger-inner']}`, - active: active ? `${css['is-active']}` : '', + burger: `${css["hamburger"]} ${css[`hamburger--${burger}`]}`, + box: `${css["hamburger-box"]}`, + inner: `${css["hamburger-inner"]}`, + active: active ? `${css["is-active"]}` : "" }; return ( @@ -48,39 +50,39 @@ Burger.propTypes = { active: PropTypes.bool, onClick: PropTypes.func, burger: PropTypes.oneOf([ - 'arrow', - 'arrowalt', - 'arrowturn', - 'boring', - 'collapse', - 'elastic', - 'emphatic', - 'minus', - 'slider', - 'spin', - 'spring', - 'squeeze', - 'stand', - 'vortex', - '3dx', - '3dy', - '3dxy', + "arrow", + "arrowalt", + "arrowturn", + "boring", + "collapse", + "elastic", + "emphatic", + "minus", + "slider", + "spin", + "spring", + "squeeze", + "stand", + "vortex", + "3dx", + "3dy", + "3dxy" ]), color: PropTypes.string, hoverOpacity: PropTypes.number, scale: PropTypes.number, marginTop: PropTypes.string, marginLeft: PropTypes.string, - style: PropTypes.object, + style: PropTypes.object }; Burger.defaultProps = { - burger: 'boring', - color: '#000', + burger: "boring", + color: "#000", hoverOpacity: 1, scale: 1, - marginTop: '25px', - marginLeft: '25px', + marginTop: "25px", + marginLeft: "25px" }; export default Burger;