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>
stageHeightUnit	Css unit of stageHeight.	CSS units	'px'	<ngx-confetti-explosion [stageHeight]="100" [stageHeightUnit]='vh'></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>
stageWidthUnit	Css unit of stageWidth.	CSS units	'px'	<ngx-confetti-explosion [stageWidth]="100" [stageWidthUnit]='vh'></ngx-confetti-explosion>
shouldDestroyAfterDone	Determines whether to destroy all confetti nodes after the duration period has passed.	boolean	true	<ngx-confetti-explosion [shouldDestroyAfterDone]="false"></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

License

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

© Chellappan