{"_id":"react-particle-effect-button","_rev":"4-bd579c987371587ea29316dc6cbfe7a1","name":"react-particle-effect-button","dist-tags":{"latest":"1.0.1"},"versions":{"0.1.1":{"name":"react-particle-effect-button","version":"0.1.1","description":"Bursting particle effect buttons for React.","author":{"name":"transitive-bullshit"},"license":"MIT","repository":{"type":"git","url":"https://github.com/transitive-bullshit/react-particle-effect-button.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","scripts":{"test":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","build":"rollup -c","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","deploy":"gh-pages -d example/build"},"dependencies":{"animejs":"^2.2.0","classnames":"^2.2.5","raf":"^3.4.0"},"peerDependencies":{"prop-types":"^15.5.4","react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^8.2.1","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.6.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","eslint":"^4.19.1","eslint-config-standard":"^11.0.0","eslint-config-standard-react":"^6.0.0","eslint-plugin-import":"^2.11.0","eslint-plugin-node":"^6.0.1","eslint-plugin-promise":"^3.7.0","eslint-plugin-react":"^7.7.0","eslint-plugin-standard":"^3.0.1","gh-pages":"^1.1.0","react":"^16.2.0","react-dom":"^16.2.0","react-scripts":"^1.1.1","rollup":"^0.54.0","rollup-plugin-babel":"^3.0.3","rollup-plugin-commonjs":"^8.2.1","rollup-plugin-node-resolve":"^3.0.2","rollup-plugin-peer-deps-external":"^2.0.0","rollup-plugin-postcss":"^1.1.0","rollup-plugin-url":"^1.3.0"},"files":["dist"],"_id":"react-particle-effect-button@0.1.1","dist":{"shasum":"3a32477f89a1a6bf49fcd08ed13bc5c375aa56b8","tarball":"https://registry.npmjs.org/react-particle-effect-button/-/react-particle-effect-button-0.1.1.tgz","fileCount":6,"unpackedSize":73433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa5dzFCRA9TVsSAnZWagAAA90P/Rm7uHQT4G9D97CkRD9A\naiu74dm5+TYxDEEv+JX7CqdSQ++PnHyK1AeKHteQF5WgVGfw8vz2YYtuBmz2\naRunK1EHF+HxXnqgyDhn11q1273M0+n+K3XUKH9tKlyqmVjFBu26t2RY4Oqa\neoRkwe6GzXBSYLfIoQyv+RE3q49Ld+fcZ009s6TBpgSvelruvgcqMqfFpn2O\nognhT6XYAQwYQiMF+o6J27cBRHjVR3ixoSf4sDG1Lisc2lnKzZ8L9ipIjqn9\n0N3qzhZdgIn1JEBdI/58Egh2oBFr0TBIgKp2w9T3Jqk38q5djhVgWpfuBSXm\nErZRCmSCiRdrvlJHIYKfNDC89U5z9w6u+9IjN/iDodR/kaxnjgHHNgpfgPsU\nGznfoP96PsQs6yKJEIiYQdYEX/WWf3mryRqys66XHK/Ps/NDJTUQOb5H+EmU\n1Rk6o6i/aolfTMF4KFsCAF3y0yIWVjmOIiuXU4E1wVunD+qP7sxLxKlmubWG\njYLaDelzby3Q7H2otSlg2niqIHIS97AfVtVVbsJuUhhDNAXciTn8fNQ3w7AJ\nnI8wm1aR1RgJjudohh98FhXqO/EWvQ6e2+z+dxVi0UQjhY0W5x/El1et5GOb\nCZkFOCLSWKVjMnDHnSWryjiVfR49OoKEahW/4a+vvGuTdwLgh3OAtaCx72X/\nZTZ4\r\n=alid\r\n-----END PGP SIGNATURE-----\r\n","integrity":"sha512-vEbu0Uvx7PqvtM6vifM+NrCputKvzR9jfQsoLfuT1NRtpRaSvqE2auCnqSyul67k5QQCRoGSWy1V1XemmlosAA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjwxITfs/KFse9kzkzNKcwDbXPtwvUPBlJf3QbQ/UntwIhALhnfW9Djon7dEjfuJkot4P+OXvEbut+W1361iUHrEc5"}]},"maintainers":[{"name":"fisch0920","email":"fisch0920@gmail.com"}],"_npmUser":{"name":"fisch0920","email":"fisch0920@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-particle-effect-button_0.1.1_1525013698957_0.7881026707493564"},"_hasShrinkwrap":false},"1.0.0":{"name":"react-particle-effect-button","version":"1.0.0","description":"Bursting particle effect buttons for React.","author":{"name":"transitive-bullshit"},"license":"MIT","repository":{"type":"git","url":"https://github.com/transitive-bullshit/react-particle-effect-button.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","scripts":{"test":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","build":"rollup -c","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","deploy":"gh-pages -d example/build"},"dependencies":{"animejs":"^2.2.0","classnames":"^2.2.5","raf":"^3.4.0"},"peerDependencies":{"prop-types":"^15.5.4","react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^8.2.1","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.6.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","eslint":"^4.19.1","eslint-config-standard":"^11.0.0","eslint-config-standard-react":"^6.0.0","eslint-plugin-import":"^2.11.0","eslint-plugin-node":"^6.0.1","eslint-plugin-promise":"^3.7.0","eslint-plugin-react":"^7.7.0","eslint-plugin-standard":"^3.0.1","gh-pages":"^1.1.0","react":"^16.2.0","react-dom":"^16.2.0","react-scripts":"^1.1.1","rollup":"^0.54.0","rollup-plugin-babel":"^3.0.3","rollup-plugin-commonjs":"^8.2.1","rollup-plugin-node-resolve":"^3.0.2","rollup-plugin-peer-deps-external":"^2.0.0","rollup-plugin-postcss":"^1.1.0","rollup-plugin-url":"^1.3.0"},"files":["dist"],"_id":"react-particle-effect-button@1.0.0","dist":{"shasum":"3863d472ec406428a80caebfcd3863ebc50d9459","tarball":"https://registry.npmjs.org/react-particle-effect-button/-/react-particle-effect-button-1.0.0.tgz","fileCount":6,"unpackedSize":73433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa5d0FCRA9TVsSAnZWagAAoO4P/RiMAmOBEbOegky5/43q\nu6fPux/k/ozyc3TrrmcE25mrHjy1u+YexY6II6KSRVLldxUkQa7+0g8iRsvF\n4cZSmkQYTBQjT4wJMJZR2NGvUjNKiogUA7Jj0FOgScQQBaL05EZY4NKpZ02K\nKAEFsaWdSpbHyROzsCP9Jbx0AN8MeC13pCYkCcLSy6klv8BRkp08iKd3pEJW\nHPLU2/5IhG4Jd5g5hRpMytC8hZQHYHT7HGENkfmbj0PIsAG8LIMpvvl6tv1E\nrub7C/JqYZSQgtsWlj1fiIJlU/43yPekKXSDDybryH6wvTUd8Ikq2kuRyTiE\nrlIpoODNCl04hUAoDujn5C4ylvB5TPF8ZG7pa14+CK9YJ5i5v9qmibs7Bg5v\n3d2X0fMSwub0th80QXCZ2UBs1sRhMTywcNy1FZtTNE/nFlBbBAFzgcutVHXs\nmKFgsOsRMhU7U3B03mlJX5X5apbLfk2A0F7ZQhOR0R+NltTNwwsjJOlJjgIW\nZvYJ0GoIJ4hYwn/rIOqFFnSRqoBMyYNeKKOW3uaVFdAhr0K1Anx8XoOfVKJF\nAdJDOmb5RLORimOaDtWCzSe44cLcRg0Y2cO+kYfs3a3JzB+ACq/utgFDAaM/\nh4CzJS80XgGSzcqXeNsOI2PCgSAjNwIOUfFQC5e9qJWSz+QsGSSZdS6Qywtw\nyrvo\r\n=v6Uv\r\n-----END PGP SIGNATURE-----\r\n","integrity":"sha512-s0yfv8Rp0qvS1LDKByjn748NU1iOed8kwNHNgzitNFXotpJ12/IpN11zmRxzAjC3Ip32jngdCBeDpQyM8/WP5Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIq/nnrBUqWItyZu8qj/RKt5NLM9ZAkKGJyX2DlsrlygIhAIG1x1E6ZSwveQ39+GSmJePyI+U6vBmCAurweeQbW+Bu"}]},"maintainers":[{"name":"fisch0920","email":"fisch0920@gmail.com"}],"_npmUser":{"name":"fisch0920","email":"fisch0920@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-particle-effect-button_1.0.0_1525013763109_0.771128308435135"},"_hasShrinkwrap":false},"1.0.1":{"name":"react-particle-effect-button","version":"1.0.1","description":"Bursting particle effect buttons for React.","author":{"name":"transitive-bullshit"},"license":"MIT","repository":{"type":"git","url":"https://github.com/transitive-bullshit/react-particle-effect-button.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","scripts":{"test":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","build":"rollup -c","start":"rollup -c -w","prepare":"yarn run build","predeploy":"cd example && yarn install && yarn run build","deploy":"gh-pages -d example/build"},"dependencies":{"animejs":"^2.2.0","classnames":"^2.2.5","raf":"^3.4.0"},"peerDependencies":{"prop-types":"^15.5.4","react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^8.2.1","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.6.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","eslint":"^4.19.1","eslint-config-standard":"^11.0.0","eslint-config-standard-react":"^6.0.0","eslint-plugin-import":"^2.11.0","eslint-plugin-node":"^6.0.1","eslint-plugin-promise":"^3.7.0","eslint-plugin-react":"^7.7.0","eslint-plugin-standard":"^3.0.1","gh-pages":"^1.1.0","react":"^16.2.0","react-dom":"^16.2.0","react-scripts":"^1.1.1","rollup":"^0.54.0","rollup-plugin-babel":"^3.0.3","rollup-plugin-commonjs":"^8.2.1","rollup-plugin-node-resolve":"^3.0.2","rollup-plugin-peer-deps-external":"^2.0.0","rollup-plugin-postcss":"^1.1.0","rollup-plugin-url":"^1.3.0"},"files":["dist"],"_id":"react-particle-effect-button@1.0.1","dist":{"shasum":"2fce601e4dfd4e27652b552a3a1ff2c07e39b8d4","tarball":"https://registry.npmjs.org/react-particle-effect-button/-/react-particle-effect-button-1.0.1.tgz","fileCount":6,"unpackedSize":73799,"integrity":"sha512-RMkYaU7sUFwkw5GYbac2iP2BiTc93worSjY0EqHRorf/QX10xFxF9yaoYoOW9IYNAAC3Iqkcaek4GV6qy+8PIQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1PJFxqa6YgahcoFhCIHifkOTBijOJl9FPIvYCehdo3AIhAI3RpVY6X1/FmYgxfXNjoMbyDtisGjgGdCFsLVDr+TmB"}]},"maintainers":[{"name":"fisch0920","email":"fisch0920@gmail.com"}],"_npmUser":{"name":"fisch0920","email":"fisch0920@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-particle-effect-button_1.0.1_1533220520286_0.32858766605560885"},"_hasShrinkwrap":false}},"time":{"created":"2018-04-29T14:54:58.957Z","0.1.1":"2018-04-29T14:55:00.104Z","modified":"2022-06-26T07:32:14.650Z","1.0.0":"2018-04-29T14:56:03.224Z","1.0.1":"2018-08-02T14:35:20.368Z"},"maintainers":[{"name":"fisch0920","email":"fisch0920@gmail.com"}],"description":"Bursting particle effect buttons for React.","repository":{"type":"git","url":"https://github.com/transitive-bullshit/react-particle-effect-button.git"},"author":{"name":"transitive-bullshit"},"license":"MIT","readme":"# react-particle-effect-button ([demo](https://transitive-bullshit.github.io/react-particle-effect-button/))\n\n> Bursting particle effect buttons for React.\n\n[![NPM](https://img.shields.io/npm/v/react-particle-effect-button.svg)](https://www.npmjs.com/package/react-particle-effect-button) [![Build Status](https://travis-ci.org/transitive-bullshit/react-particle-effect-button.svg?branch=master)](https://travis-ci.org/transitive-bullshit/react-particle-effect-button) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n[![Demo](https://raw.githubusercontent.com/transitive-bullshit/react-particle-effect-button/master/example/demo.gif)](https://transitive-bullshit.github.io/react-particle-effect-button/)\n\nThis library is a React port of an awesome [Codrops Article](https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/) by [Luis Manuel](https://tympanus.net/codrops/author/luis/) (original [source](https://github.com/codrops/ParticleEffectsButtons/)).\n\n## Install\n\n```bash\nnpm install --save react-particle-effect-button\n```\n\n## Usage\n\nCheck out the [Demo](https://transitive-bullshit.github.io/react-particle-effect-button/) to see it in action.\n\n```jsx\nimport React, { Component } from 'react'\n\nimport ParticleEffectButton from 'react-particle-effect-button'\n\nclass App extends Component {\n  state = {\n    hidden: false\n  }\n\n  render () {\n    return (\n      <ParticleEffectButton\n        color='#121019'\n        hidden={this.state.hidden}\n      >\n        BUTTON CONTENT GOES HERE\n      </ParticleEffectButton>\n    )\n  }\n}\n```\n\nNote that `children` can be anything from a simple `<button>` to a complex React subtree. The `children` should represent the button's contents.\n\nYou change the `hidden` boolean prop to kick-off an animation, typically as a result of a click on the button's contents. If `hidden` changes to `true`, the button will perform a disintegrating animation. If `hidden` changes to `false`, it will reverse and reintegrate the original content.\n\n## Props\n\n| Property      | Type               | Default                               | Description                                                                                                                                  |\n|:--------------|:-------------------|:--------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------|\n| `hidden`  | boolean           | false                                  | Whether button should be hidden or visible. Changing this prop starts an animation. |\n| `color`  | string           | '#000'                                  | Particle color. Should match the button content's background color |\n| `children`  | React Node           | undefined                         | The contents of the button. |\n| `duration`  | number           | 1000                                  | Animation duration in milliseconds. |\n| `easing`  | string           | 'easeInOutCubic'                        | Animation easing. |\n| `type`  | string           | circle                                  | 'circle' or 'rectangle' or 'triangle' |\n| `style`  | string           | fill                                  | 'fill' or 'stroke' |\n| `direction`  | string           | 'left'                                  | 'left' or 'right' or 'top' or 'bottom' |\n| `canvasPadding`  | number           | 150                                  | Amount of extra padding to add to the canvas since the animation will overflow the content's bounds |\n| `size`  | number | func           | random(4)                             | Particle size. May be a static number or a function which returns numbers. |\n| `speed`  | number | func           | random(4)                             | Particle speed. May be a static number or a function which returns numbers. |\n| `particlesAmountCoefficient`  | number    | 3                             | Increases or decreases the relative number of particles |\n| `oscillationCoefficient`  | number           | 20                         | Increases or decreases the relative curvature of particles |\n| `onBegin`  | func           | noop                                     | Callback to be notified once an animation starts. |\n| `onComplete`  | func           | noop                                  | Callback to be notified once an animation completes. |\n\nI tried to keep the properties exactly the same as in the original codrops version.\n\n## Related\n\n- [anime.js](http://animejs.com/) - Underlying animation engine.\n- [ParticleEffectsButtons](https://github.com/codrops/ParticleEffectsButtons/) - Original source this library is based on.\n- [Codrops Article](https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/) - Original article this library is based on.\n\nThis module was bootstrapped with [create-react-library](https://github.com/transitive-bullshit/create-react-library).\n\n## License\n\nMIT © [Travis Fischer](https://github.com/transitive-bullshit)\n","readmeFilename":"readme.md"}