# confetti-js > Easily Generate random confetti for your above-the-fold content Latest version **0.0.18** (published 2020-03-11) · MIT license · 0 weekly downloads ## Install ```sh npm install confetti-js pnpm add confetti-js yarn add confetti-js bun add confetti-js ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.18 | | Published | 2020-03-11 | | First published | 2017-11-19 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 54.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 615 | | Author | Gabriel Age | | Maintainers | age | ## Links - npm: https://www.npmjs.com/package/confetti-js - Repository: https://github.com/Agezao/confetti-js - Homepage: https://github.com/Agezao/confetti-js#readme - Issues: https://github.com/Agezao/confetti-js/issues - npm.io page: https://npm.io/package/confetti-js ## Recent versions - 0.0.18 (latest) — 2020-03-11 - 0.0.17 — 2020-01-23 - 0.0.16 — 2019-11-25 - 0.0.15 — 2019-04-30 - 0.0.14 — 2018-09-21 - 0.0.13 — 2018-08-09 - 0.0.12 — 2018-07-31 - 0.0.11 — 2017-11-19 - 0.0.10 — 2017-11-19 - 0.0.9 — 2017-11-19 ## README # 🎉 Confetti Generator 🎉 Easily Generate random confetti with javascript and make your design look cooler

## Demo 🚀 Demo // Examples ## Why? Have you ever seen that cool looking confetti on landing pages and above-the-fold content? We give you the power to create the same effect for free and without the hassle of having to design or code it from scratch. ## Installing/Using ### 📲 Downloading - Using `npm` ```bash npm install confetti-js --save ``` - Direct download -> [click here](https://github.com/agezao/confetti-js/archive/master.zip) ### ➕ Add scripts - The `classic` way ```html ``` - ES6 module ```javascript // At the component you want to use confetti import ConfettiGenerator from "confetti-js"; ``` ### 🤔 How to use it? After installing the plugin(the topic above), just call-it passing your options: #### html ```html

``` #### javascript ```javascript var confettiSettings = { target: 'my-canvas' }; var confetti = new ConfettiGenerator(confettiSettings); confetti.render(); ``` You can also pass a canvas element as the target: ```javascript var confettiElement = document.getElementById('my-canvas'); var confettiSettings = { target: confettiElement }; var confetti = new ConfettiGenerator(confettiSettings); confetti.render(); ``` ### React ```jsx React.useEffect(() => { const confettiSettings = { target: 'my-canvas' }; const confetti = new ConfettiGenerator(confettiSettings); confetti.render(); return () => confetti.clear(); }, []) // add the var dependencies or not ``` done! ## Options | Attribute | Description | Example value | Default value | |---------------------------|-------------|--------------------|---------| | *`target`* | The Id tag or node of the canvas that will be used | 'my-canvas' | 'confetti-holder' | | *`max`* | The number of props(confetti) to be rendered | 11 | 80 | | *`size`* | Prop size | 1.8 | 1 | | *`animate`* | If the confetti should fall | false | true | | *`respawn`* | If the confetti should be recreated after going off-screen | false | true | | *`clock`* | The speed confetti fall | 50 | 25 | | *`props`* | The type of props(confetti) that should be rendered. In addition to those listed in the default, there's a special "svg" type which requires further configuration and is detailed below. | ['circle', 'square'] | ['circle', 'square', 'triangle', 'line'] | | *`colors`* | The color to be rendered on the confetti. By default, RGB format inside an array. | [[0,0,0], [255,255,255]] | [[165,104,246],[230,61,135],[0,199,228],[253,214,126]] | | *`start_from_edge`* | Whether the confettis should fall from the top of the screen (or should move up from the bottom) | true | false | | *`width`* | Canvas width | 960 | *window size* | | *`height`* | Canvas height | 767 | *window height* | | *`rotate`* | If set to `true`, SVG and squares will rotate while falling. | `true` | `false` | ### Special SVG particle type There is an extra special partical type ("prop") which allows you to render SVGs as confetti particles. For example: ```json { "props": [ "circle", "square", { "type": "svg", "src": "site/hat.svg" } ] } ``` You must specify the `type` and `src` properties. There are also a few other configuration properties available to SVG objects: | Attribute | Description | Example value | Default value | |---------------------------|-------------|--------------------|---------| | *`size`* | Set the size of the SVG when it renders as a particle. | `25` | `15` | | *`weight`* | The probability of this particle being rendered, where 1 is a regular weight, and 0.1 is uncommon. | `0.5` | `1` | ## API Using the object generated by `new ConfettiGenerator()` is pretty easy, there're just two main methods actually. | Method | Description | |---------------------------|-------------| | *`render`* | Render the confetti at the config `