2.0.0 ā¢ Published 6 months ago
ngx-confetti-explosion v2.0.0
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-explosionUsage
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' | 'mix' | <ngx-confetti-explosion [particlesShape]="'circles'"></ngx-confetti-explosion> |
| 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> |
| 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
License
ngx-confetti-explosion is distributed under the MIT License.
Ā© Chellappan