Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including confetti-js with all npm packages installed. Try it out:

var confettiJs = require("confetti-js")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

confetti-js v0.0.15

Easily Generate random confetti for your above-the-fold content

🎉 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

      npm install confetti-js --save
    
  • Direct download -> click here

➕ Add scripts

  • The classic way

    <script src="node_modules/confetti-js/dist/index.min.js"></script>
    
  • ES6 module

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

<canvas id="my-canvas"></canvas>

javascript

var confettiSettings = { target: 'my-canvas' };
var confetti = new ConfettiGenerator(confettiSettings);
confetti.render();

React

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

AttributeDescriptionExample valueDefault value
targetThe Id tag of the canvas that will be used'my-canvas''confetti-holder'
maxThe number of props(confetti) to be rendered1180
sizeProp size1.81
animateIf the confetti should fallfalsetrue
clockThe speed confetti fall5025
propsThe 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']
colorsThe 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]]
widthCanvas width960window size
heightCanvas height767window height
rotateIf set to true, SVG and squares will rotate while falling.truefalse

Special SVG particle type

There is an extra special partical type ("prop") which allows you to render SVGs as confetti particles. For example:

{ 
  "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:

AttributeDescriptionExample valueDefault value
sizeSet the size of the SVG when it renders as a particle.2515
weightThe probability of this particle being rendered, where 1 is a regular weight, and 0.1 is uncommon.0.51

API

Using the object generated by new ConfettiGenerator() is pretty easy, there're just two main methods actually.

MethodDescription
renderRender the confetti at the config <canvas/>
clearClear the <canvas/> where the confetti where rendered
var confetti = new ConfettiGenerator();
confetti.render();
//
confetti.clear();

License

You can use/hack/re-distribute/do whatever you want with this for free without having to credit the author or anything. Go on, just do it.

But if you take the time to contribute with the project it would be nice too, just saying :)

Thanks

Special thanks to "Paper Matthew" on codepen for providing the starting point wich I fork to build this. You are awesome.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free