{"_id":"@cwahlers/react-confetti-canvas","_rev":"1-35b1fdd660ebe9168cdb96237c21cb20","name":"@cwahlers/react-confetti-canvas","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.2":{"name":"@cwahlers/react-confetti-canvas","version":"1.0.2","description":"Creates a canvas on the page with confetti fluttering inside of it","main":"build/index.js","scripts":{"build":"babel lib -d build","build:watch":"babel lib -w -d build","lint":"eslint lib/**; exit 0","lint:watch":"esw -w lib/**","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/claus/react-confetti-canvas.git"},"keywords":["reactjs","confetti","canvas"],"author":{"name":"Christian Micklisch","email":"christian.micklisch@successwithsos.com","url":"https://github.com/fufu70/"},"license":"MIT","bugs":{"url":"https://github.com/fufu70/react-confetti-canvas/issues"},"homepage":"https://github.com/fufu70/react-confetti-canvas#readme","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-eslint":"^10.0.3","babel-jest":"^24.9.0","babel-loader":"^8.0.6","babel-plugin-dynamic-import-node":"^2.3.0","babel-plugin-istanbul":"^6.0.0","babel-plugin-react-transform":"^3.0.0","babel-plugin-syntax-dynamic-import":"^6.18.0","babel-polyfill":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babel-preset-react-hmre":"^1.1.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.26.0","eslint":"^6.8.0","eslint-plugin-import":"^2.20.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.17.0","eslint-watch":"^6.0.1","polished":"^3.4.2","prop-types":"^15.7.2","react":"^16.12.0","react-dom":"^16.12.0","styled-components":"^5.0.0"},"dependencies":{"babel-plugin-transform-decorators-legacy":"^1.3.5"},"gitHead":"aecd942728ba97e40c91d59035b87b7df3ae4ee1","_id":"@cwahlers/react-confetti-canvas@1.0.2","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-IGkgs4m5X/VpGEJ9/tCUtKCtnPENBJBdI1pmJsFYgn308E8KZNDTAunvJm9SkJ5DTwv7wg1CIapSWTkTBC8Rdg==","shasum":"a52fd3e0925c0c94acf8271fe224f6e50eb06644","tarball":"https://registry.npmjs.org/@cwahlers/react-confetti-canvas/-/react-confetti-canvas-1.0.2.tgz","fileCount":12,"unpackedSize":3737432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHW5+CRA9TVsSAnZWagAAqL4P/RgE3jCP4qmr4shiv4g7\n1WD7p0fSfUe/+zYgG7COveb7rWMUym/SgqSKgfkVQBBmXEqC1+POGu8Jc2Os\nxpR/WsnW+lsvva9hk3ih6yJb5jlU+A3PyTUG2lm/p2+jnh+rvxu3jXbpCdJX\neNgzI2sq1QSMj72rBe92GDzn9jGGM9dyCXBPIJRb/Snj3Vykp6vJx6FXp4lG\nLxc6ruufgygGw0ulIAANtfabuQZWPfOvrwedAG75cZ4aCK79SjMcVwK9Wu0E\nOShRrbrntiPpzYlfzFhKdXZEMhco3hIRFLx2xwnqKS6yZUBYjTtb14k9Jdia\n3r7GjDpliHLtZ3CBsgNO8MIBqEH3F51oEP7Bt0nZsq8Lm1AW+pSYcilmxAdS\nCFN5o8y9AE1vYCXBGOIeuAzELljyJIjR9Px9Kjq6swKJ4ZU+bFgiRJcsn4gc\nCcEM4xdc4NdgIiX1o6BJCtPuafjw4gTSxBnc+Jq3DJXutkQrCCsh+5P8jJq3\nLrsgbIrYxiMQBYcY50+LoQ+cjQtrKXlQK/ZIdgqJopegheQbbYyDXFem/DM/\n5xZCW2Z0fwiHdDpihl377hgujRtKBG+Am2TqGDj7A+6EHcCZB+p6zCtGFDRo\ndYSkHzmpRhXoMIeYUTp6IlJtIxt+iTuGfF9Paf9wZfRaNXYBAPsNIGx2dN7E\nzRhp\r\n=5Jy/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCP7BvUEcLVmk58GlnCiubAJDDWpWXUm4WPXAz52uJQkQIgXDkLe0e03P/OWuDA1QAU7ti4tMBQUflJHFbWDW0aBK0="}]},"maintainers":[{"name":"cwahlers","email":"claus@codeazur.com.br"}],"_npmUser":{"name":"cwahlers","email":"claus@codeazur.com.br"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-confetti-canvas_1.0.2_1578987134320_0.9668381606928416"},"_hasShrinkwrap":false}},"time":{"created":"2020-01-14T07:32:14.293Z","1.0.2":"2020-01-14T07:32:14.533Z","modified":"2022-04-05T02:22:40.964Z"},"maintainers":[{"name":"cwahlers","email":"claus@codeazur.com.br"}],"description":"Creates a canvas on the page with confetti fluttering inside of it","homepage":"https://github.com/fufu70/react-confetti-canvas#readme","keywords":["reactjs","confetti","canvas"],"repository":{"type":"git","url":"git+https://github.com/claus/react-confetti-canvas.git"},"author":{"name":"Christian Micklisch","email":"christian.micklisch@successwithsos.com","url":"https://github.com/fufu70/"},"bugs":{"url":"https://github.com/fufu70/react-confetti-canvas/issues"},"license":"MIT","readme":"# react-confetti-canvas\n\n![Gif of what it looks like](assets/canvas.gif)\n\nA basic confetti canvas that is missing basic styling to be added to the canvas.\n\nThe method for showing the confetti and ribbons was created by [Hemn Chawroka](https://codepen.io/iprodev/) on [Codepen](https://codepen.io/iprodev/pen/azpWBr)\n\n## Installation\n\nThis is a [ReactJS](https://reactjs.org/) component available through the\n[npm registry](https://www.npmjs.com/).\n\nInstallation is done using the\n[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):\n\n```bash\n$ npm install react-confetti-canvas\n```\n\n## How to Use\n\nTo simply add the confetti canvas on to the page import it and include it into the container. The styling must be manually applied through your CSS environment, there is no styling added on to the page from the `react-confetti-canvas`.\n\n```javascript\nimport React from 'react';\nimport ConfettiCanvas from 'react-confetti-canvas';\n\nconst App = () => {\n  return (\n    <ConfettiCanvas />\n  );\n};\n\nexport default App;\n```\n\n#### Color\n\nTo Change the colors of the ribbon and paper confetti falling down pass an array of arrays that represent the front and back hex color of a ribbon or paper.\n\n```javascript\nconst App = () => {\n  ...\n  return (\n    <ConfettiCanvas\n      colors={[\n        ['#F1948A', '#C39BD3'],\n        ['#7FB3D5', '#76D7C4'],\n        ['#F0B27A', '#7DCEA0']\n      ]} />\n  );\n  ...\n};\n```\n\n\n#### Duration\n\nThe rate at which confetti pieces fall is determined by the duration. The duration stands for the amount of time that has passed in seconds in each frame. The higher the number the faster the confetti pieces fall, the lower the number the slower the confetti pieces fall.\n\n```javascript\nconst App = () => {\n  ...\n  return (\n    <ConfettiCanvas\n      duration={0.001} />\n  );\n  ...\n};\n```\n\n#### Paper Count\n\nHow many paper pieces will fall at one time on the canvas.\n\n```javascript\nconst App = () => {\n  ...\n  return (\n    <ConfettiCanvas\n      paperCount={100} />\n  );\n  ...\n};\n```\n\n#### Ribbon Count\n\nHow many ribbons will fall at one time on the canvas.\n\n```javascript\nconst App = () => {\n  ...\n  return (\n    <ConfettiCanvas\n      ribbonCount={11} />\n  );\n  ...\n};\n```\n\n#### Ribbon Particle Count\n\nHow many connected elements are inside of the ribbon, the higher the number the longer the ribbon will be.\n\n```javascript\nconst App = () => {\n  ...\n  return (\n    <ConfettiCanvas\n      ribbonParticleCount={30} />\n  );\n  ...\n};\n```\n\n#### Ribbon Particle Dist\n\nHow far apart each particle is on the ribbon, the higher the number the farther apart the connected particles are.\n\n```javascript\nconst App = () => {\n  ...\n  return (\n    <ConfettiCanvas\n      ribbonParticleDist={8.0} />\n  );\n  ...\n};\n```\n\n#### Ribbon Particle Thick\n\nThe thickness of the ribbon itself.\n\n```javascript\nconst App = () => {\n  ...\n  return (\n    <ConfettiCanvas\n      ribbonParticleThick={8.0} />\n  );\n  ...\n};\n```\n\n#### Ribbon Particle Angle\n\nThe angle at which the ribbons twist to show the backside of the ribbon.\n\n```javascript\nconst App = () => {\n  ...\n  return (\n    <ConfettiCanvas\n      ribbonParticleAngle={45} />\n  );\n  ...\n};\n```\n\n#### Ribbon Particle Mass\n\nHow much the ribbon will be affected by the drag produced by its fall. The higher the value the more it will be affected by drag, the lower the number the less it will be effected; The lower the number the faster it will fall.\n\n```javascript\nconst App = () => {\n  ...\n  return (\n    <ConfettiCanvas\n      ribbonParticleMass={1} />\n  );\n  ...\n};\n```\n\n#### Ribbon Particle Drag\n\nHow much the ribbon will be effected by its mass as it falls. The lower the value the slower it falls and flutters.\n\n```javascript\nconst App = () => {\n  ...\n  return (\n    <ConfettiCanvas\n      ribbonParticleDrag={0.05} />\n  );\n  ...\n};\n```\n\n\n## Notes\n\nThe latest version will work with packages `react` and `react-dom` version `^16.0.0`.\n\nIf you are running `react` and `react-dom` version `15.0.0` you can use the `v0.1.1`, it was tested with `react` and `react-dom` version `15.6.2`.\n\nTo install for react's `15.0.0`:\n\n```bash\n$ npm install react-confetti-canvas@0.1.1\n```","readmeFilename":"README.md"}