Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/khumozin/ngx-rewards
NgxRewards lets you add micro-interactions to your app, and reward users with the rain of confetti, emoji or balloons in seconds.
https://github.com/khumozin/ngx-rewards
angular confetti emojis firebase-hosting npm semantic-release
Last synced: 30 days ago
JSON representation
NgxRewards lets you add micro-interactions to your app, and reward users with the rain of confetti, emoji or balloons in seconds.
- Host: GitHub
- URL: https://github.com/khumozin/ngx-rewards
- Owner: Khumozin
- Created: 2023-10-14T07:07:19.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-22T18:34:11.000Z (about 1 year ago)
- Last Synced: 2024-03-23T12:33:36.556Z (9 months ago)
- Topics: angular, confetti, emojis, firebase-hosting, npm, semantic-release
- Language: TypeScript
- Homepage: https://ngx-rewards.web.app/
- Size: 188 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NgxRewards ð
Here is a [simple demo](https://ngx-rewards.web.app/)
## Table of Contents
- [About](#about)
- [Installation](#installation)
- [Getting Started](#getting-started)
- [Props & config](#props--config)
- [Contributing](#contributing)
- [License](#license)
## About
**ngx-rewards** lets you add micro-interactions to your app, and reward users with the rain of confetti, emoji or balloons in seconds.
Firing confetti all over the page may seem like a questionable idea, but keep in mind that rewarding users for their actions is not.
## Installation
```
ng add ngx-rewards
```
or
```
npm install ngx-rewards
```
##
```
// app.module.ts
import { NgxRewardsModule } from 'ngx-rewards';
@NgModule({
declarations: [...],
imports: [..., NgxRewardsModule],
providers: [],
bootstrap: [...],
})
export class AppModule {}
```
```
// app.component.ts
import { EmojiConfig } from 'ngx-rewards';
@Component({...})
export class AppComponent {
defaultEmoji = ['ðĪ', 'ð', 'ðĨģ', 'ð', 'ðĪŠ', 'ðĨ', 'ð'];
emojiConfig: EmojiConfig = {
elementCount: 50,
elementSize: 20,
};
}
```
```
// app.component.html
Emoji
Confetti
Balloons
All 3
```
### Props & config
Confetti config object:
| name | type | description | default |
| ------------------- | ---------- | -------------------------------------------------- | ------------------------------------------------------- |
| lifetime | number | time of life | 200 |
| angle | number | initial direction of particles in degrees | 90 |
| decay | number | how much the velocity decreases with each frame | 0.94 |
| spread | number | spread of particles in degrees | 45 |
| startVelocity | number | initial velocity of particles | 35 |
| elementCount | number | particles quantity | 50 |
| elementSize | number | particle size in px | 8 |
| zIndex | number | z-index of particles | 0 |
| position | string | one of CSSProperties['position'] - e.g. "absolute" | "fixed" |
| colors | string[] | An array of colors used when generating confetti | ['#A45BF1', '#25C6F6', '#72F753', '#F76C88', '#F5F770'] |
| onAnimationComplete | () => void | A function that runs when animation completes | undefined |
Balloons config object:
| name | type | description | default |
| ------------------- | ---------- | -------------------------------------------------- | ------------------------------------------------------- |
| lifetime | number | time of life | 600 |
| angle | number | initial direction of balloons in degrees | 90 |
| decay | number | how much the velocity decreases with each frame | 0.999 |
| spread | number | spread of balloons in degrees | 50 |
| startVelocity | number | initial velocity of the balloons | 3 |
| elementCount | number | balloons quantity | 10 |
| elementSize | number | balloons size in px | 20 |
| zIndex | number | z-index of balloons | 0 |
| position | string | one of CSSProperties['position'] - e.g. "absolute" | "fixed" |
| colors | string[] | An array of colors used when generating balloons | ['#A45BF1', '#25C6F6', '#72F753', '#F76C88', '#F5F770'] |
| onAnimationComplete | () => void | A function that runs when animation completes | undefined |
Emoji config object:
| name | type | description | default |
| ------------------- | ---------- | -------------------------------------------------- | ------------------------------------------ |
| lifetime | number | time of life | 200 |
| angle | number | initial direction of emoji in degrees | 90 |
| decay | number | how much the velocity decreases with each frame | 0.94 |
| spread | number | spread of emoji in degrees | 45 |
| startVelocity | number | initial velocity of emoji | 35 |
| elementCount | number | emoji quantity | 20 |
| elementSize | number | emoji size in px | 25 |
| zIndex | number | z-index of emoji | 0 |
| position | string | one of CSSProperties['position'] - e.g. "absolute" | "fixed" |
| emoji | string[] | An array of emoji to shoot | ['ðĪ', 'ð', 'ðĨģ', 'ð', 'ðĪŠ', 'ðĨ', 'ð'] |
| onAnimationComplete | () => void | A function that runs when animation completes | undefined |
## Contributing
If you would like to contribute to this project, please follow these steps:
1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and test them thoroughly.
4. Create a pull request with a clear description of you changes.
## License
This News App project is licensed under the `MIT License`. Feel free to use and modify it as per your requirements.