# 🎉 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 "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(); ``` done! ## Options | Attribute | Description | Example value | Default value | |---------------------------|-------------|--------------------|---------| | *`target`* | The Id tag 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 | | *`clock`* | The speed confetti fall | 50 | 25 | | *`props`* | The type of props(confetti) that should be rendered. All the available are at the default. | ['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]] | | *`width`* | Canvas width | 960 | *window size* | | *`height`* | Canvas height | 767 | *window height* | ## 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 `