Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chellappanrajan/ngx-confetti-explosion
Confetti in Angular
https://github.com/chellappanrajan/ngx-confetti-explosion
angular angular16 angular2 typescript
Last synced: 6 days ago
JSON representation
Confetti in Angular
- Host: GitHub
- URL: https://github.com/chellappanrajan/ngx-confetti-explosion
- Owner: ChellappanRajan
- Created: 2023-07-29T15:59:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-03T09:39:42.000Z (10 days ago)
- Last Synced: 2024-11-07T11:03:01.533Z (6 days ago)
- Topics: angular, angular16, angular2, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-confetti-explosion
- Size: 707 KB
- Stars: 9
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://www.npmjs.com/package/svelte-confetti-explosion) and [react-confetti-explosion](https://github.com/herrethan/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
```bash
# npm
npm install ngx-confetti-explosion
# yarn
yarn add ngx-confetti-explosion
```
## Usage
Basic usage:
```html
```
Customizing behavior with options:
```html
```
## Inputs (Props)
| Prop Name | Description | Type | Default Value | Example |
|---------------------|------------------------------------------------------------------------------------------------|------------------------|---------------------------|-------------------------------------------------------|
| particleCount | Number of confetti particles to create. | number | 150 | `` |
| particleSize | Size of the confetti particles in pixels. | number | 12 | `` |
| duration | Duration of the confetti animation in milliseconds. | number | 3500 | `` |
| colors | Colors to use for the confetti particles. Provide an array of strings representing colors. | string[] | `['#FFC700', '#FF0000', '#2E3191', '#41BBC7']` | `` |
| particlesShape | Shape of particles to use. Can be `'mix'`, `'circles'`, or `'rectangles'`. | `'mix' | 'circles' | 'rectangles'` | 'mix' | `` |
| force | Force of the confetti particles. Should be a value between 0 and 1. | number | 0.5 | `` |
| stageHeight | Height of the confetti animation stage in pixels. Confetti will only fall within this height. | number | 800 | `` |
| stageWidth | Width of the confetti animation stage in pixels. Confetti will only fall within this width. | number | 1600 | `` |
| 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; | `` |
### 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](https://stackblitz.com/edit/stackblitz-starters-tnb3sv?file=src%2Fmain.ts)
## 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](https://twitter.com/che_off)