Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 37 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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
Expand All @@ -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() {
Expand All @@ -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() {
Expand All @@ -76,47 +76,47 @@ 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

React CSS Burger utilizes modern CSS3 features, such as CSS variables, and is only meant for use with modern browsers, but smart fallbacks are provided to allow for graceful degradation when viewed on an older browser.

## 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/)

Expand All @@ -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)
95 changes: 39 additions & 56 deletions example/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"

Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"

Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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:
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"

Expand Down
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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",
Expand Down
Loading