ChellappanRajan / ngx-confetti-explosion

Confetti in Angular

ngx-confetti-explosion

Let's celebrate with confetti! ngx-confetti-explosion is an Angular package that lets you create an amazing confetti explosion on your web page.

This library is based on the amazing svelte-confetti-explosion and react-confetti-explosion package. We have taken the core logic from that package and implemented it in Angular separately, making various optimizations along the way.

Features

• 🎇 Simple - Easy to use with minimal configuration required.
• 🎆 Elegant - Utilizes an Angular component for seamless integration.
• 🌈 Highly Customizable - Provides numerous options for different confetti behaviors.

Installation

# npm
npm install ngx-confetti-explosion

# yarn
yarn add ngx-confetti-explosion

Usage

Basic usage:

<ngx-confetti-explosion></ngx-confetti-explosion>

Customizing behavior with options:

<ngx-confetti-explosion [particleCount]="200" [force]="0.3"></ngx-confetti-explosion>

Inputs (Props)

Prop Name	Description	Type	Default Value	Example
particleCount	Number of confetti particles to create.	number	150	<ngx-confetti-explosion [particleCount]="200"></ngx-confetti-explosion>
particleSize	Size of the confetti particles in pixels.	number	12	<ngx-confetti-explosion [particleSize]="20"></ngx-confetti-explosion>
duration	Duration of the confetti animation in milliseconds.	number	3500	<ngx-confetti-explosion [duration]="5000"></ngx-confetti-explosion>
colors	Colors to use for the confetti particles. Provide an array of strings representing colors.	string[]	['#FFC700', '#FF0000', '#2E3191', '#41BBC7']	<ngx-confetti-explosion [colors]="['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']"></ngx-confetti-explosion>
particlesShape	Shape of particles to use. Can be 'mix', 'circles', or 'rectangles'.	`'mix'	'circles'	'rectangles'`
force	Force of the confetti particles. Should be a value between 0 and 1.	number	0.5	<ngx-confetti-explosion [force]="0.3"></ngx-confetti-explosion>
stageHeight	Height of the confetti animation stage in pixels. Confetti will only fall within this height.	number	800	<ngx-confetti-explosion [stageHeight]="500"></ngx-confetti-explosion>
stageWidth	Width of the confetti animation stage in pixels. Confetti will only fall within this width.	number	1600	<ngx-confetti-explosion [stageWidth]="500"></ngx-confetti-explosion>
style (--x, --y)	Style props to shift the confetti particles on the x and y axes by the specified amount.	CSS units (e.g., px, em, rem)	--x: 10px; --y: 10px;	<ngx-confetti-explosion style="--x: 10px; --y: 10px;"></ngx-confetti-explosion>

Events

Event Name	Description	Payload	Example
explosionDone	Emitted when the confetti animation is completed and all confetti nodes are destroyed.	void	(explosionDone)="onExplosionDone($event)"

Examples

Basic Example

Performance

This library generates 2 DOM nodes for each confetti particle. With the default setting of 150 particles, it results in 300 nodes. For higher particle counts, such as 400 or 500, it is advisable to check your target devices' performance

License

ngx-confetti-explosion is distributed under the MIT License.

© Chellappan