Get the party started with Solid! This package allows you to display a super lightweight confetti explsoion on screen. It doesn't use canvas, only CSS animations. It also doesn't ship a particle generator (lol). A pretty grain solution for all your partying needs.
This library is the Solid port of the amazing herrethan/react-confetti-explosion and svelte-confetti-explosion packages. All the logic is from their packages only, optimisation and Solid code are mine 😉
- 🤏 Tiny - Small and efficient (2kb).
- 🐇 Simple - Quite simple to use, and effectively no-config required!
- 🧙♀️ Elegant - Use a Solid component rather than setting things up in
onMounthook. - 🗃️ Highly customizable - Offers tons of options that you can modify to get different behaviors.
- 🖥️ SSR friendly - Works seamlessly in SolidStart and other Server Side Rendering environments!
# pnpm
pnpm add solid-confetti-explosion
# npm
npm install solid-confetti-explosion
# yarn
yarn add solid-confetti-explosionimport { ConfettiExplosion } from 'solid-confetti-explosion';
const App () => (
<ConfettiExplosion />
);Customizing behavior with options:
const App () => (
<ConfettiExplosion particleCount={200} force={0.3} />
);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.
Number of confetti particles to create.
type: number
Default value: 150
Example:
<ConfettiExplosion particleCount={200} />Size of the confetti particles in pixels
type: number
Default value: 12
Example:
<ConfettiExplosion particleSize={20} />Duration of the animation in milliseconds
type: number
Default value: 3500
Example:
<ConfettiExplosion duration={5000} />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: Array<string>
Default value: ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
Example:
<ConfettiExplosion colors={["var(--yellow)", "var(--red)", "#2E3191", "#41BBC7"]} />Shape of particles to use. Can be mix, circles or rectangles
mix will use both circles and rectangles
circles will use only circles
rectangles will use only rectangles
type: 'mix' | 'circles' | 'rectangles'
Default value: 'mix'
Example:
<ConfettiExplosion particlesShape="circles" />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: number
Default value: 0.5
Example:
<ConfettiExplosion force={0.3} />Height of the stage in pixels. Confetti will only fall within this height.
type: number
Default value: 800
Example:
<ConfettiExplosion stageHeight={500} />Width of the stage in pixels. Confetti will only fall within this width.
type: number
Default value: 1600
Example:
<ConfettiExplosion stageWidth={500} />Whether or not destroy all confetti nodes after the duration period has passed. By default it destroys all nodes, to free up memory.
type: boolean
Default value: true
Example:
<ConfettiExplosion shouldDestroyAfterDone={false} />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 shouldDestroyAfterDone to false.
- 1.1.0 - Upgraded to latest Solid, switched to named exports and minor cleanup.
- 1.1.5 - Patched SSR issue, removed solid-styled-components, added class property.
- 1.1.6 - Cleaned up dependency list
- 1.1.8 - Patched exports (thanks ryoid) and updated docs (thanks mhyfritz)
- 1.2.0 - Upgraded build system to use tsup instead of rollup
MIT License