Confetti explosion in Vue šš
npm install @neoconfetti/vueLet's party šš with Vue! @neoconfetti/vue allows you to show an awesome confetti explosion on your page, with Vue!
- š¤ Tiny - 1.56KB min+br.
- š Simple - Quite simple to use, and effectively no-config required!
- š§āāļø Elegant - Vue directive v-confetti rather than setting things up in mounted() hook.
- šļø Customizable - Offers tons of options that you can modify to get different behaviors.
- š„ļø SSR friendly - Works seamlessly in NuxtJS, VitePress and other Server Side Rendering environments!
``bashpnpm
pnpm add @neoconfetti/vue
Usage
Basic usage:
vue
`Customizing behavior with options:
vue
`Props
There's tons of options available for this package. All of them are already documented within the code itself, so you'll never have to leave the code editor.
$3
Number of confetti particles to create.
type:
Default value: 150
Example:
vue
`$3
Size of the confetti particles in pixels
type:
Default value: 12
Example:
vue
`$3
Shape of particles to use. Can be
, circles or rectangles will use both circles and rectangles
circles will use only circles
rectangles will use only rectanglestype:
'mix' | 'circles' | 'rectangles'Default value:
Example:
vue
`$3
Duration of the animation in milliseconds
type:
Default value: 3500
Example:
vue
`$3
Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors, CSS Variables, literally anything valid in plain CSS.
type:
Default value:
Example:
vue
`$3
Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.
type:
Default value: 0.5
Example:
vue
`$3
Height of the stage in pixels. Confetti will only fall within this height.
type:
Default value: 800
Example:
vue
`$3
Width of the stage in pixels. Confetti will only fall within this width.
type:
Default value: 1600
Example:
vue
`$3
Whether or not destroy all confetti nodes after the
period has passed. By default it destroys all nodes, to free up memory.type:
booleanDefault value:
Example:
vue
`Fine-grained reactivity
Changing the options will destroy the existing confetti mid-flight, and create a new one with the new options. Exception: If
isn't changed, and properties like colors or particleShape is changed, the confetti particles will change their colors or shape mid-flight.Performance
This library functions by creating 2 DOM nodes for every single confetti. By default, if the
particlesCount is set to 150, it will create 300 nodes. This is a lot of nodes. For most devices, these many nodes are not a big issue, but I recommend checking your target devices' performance if you choose to go with a higher number, like 400 or 500.Also, after the specified
duration, all the confetti DOM nodes will be destroyed. This is to free up memory. If you wish to keep them around, set destroyAfterDone to false`.This library is the port of the amazing react-confetti-explosion package, just 10X smaller and faster. All the logic is from that package only, optimisation and Svelte code are mine š
MIT License
Ā© Puru Vijay