Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/avo-hq/stimulus-confetti
The easiest way to add confetti to your StimulusJS app
https://github.com/avo-hq/stimulus-confetti
confetti rails stimulus stimulusjs
Last synced: 3 months ago
JSON representation
The easiest way to add confetti to your StimulusJS app
- Host: GitHub
- URL: https://github.com/avo-hq/stimulus-confetti
- Owner: avo-hq
- License: mit
- Created: 2022-08-04T07:23:44.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-25T11:01:53.000Z (10 months ago)
- Last Synced: 2024-07-29T05:34:44.535Z (3 months ago)
- Topics: confetti, rails, stimulus, stimulusjs
- Language: JavaScript
- Homepage: https://avohq.io
- Size: 15.9 MB
- Stars: 65
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-hotwire - stimulus-confetti - A Stimulus controller for adding confetti animations. (**Awesome Hotwire** [](https://github.com/sindresorhus/awesome) / Stimulus)
- awesome-hotwire - stimulus-confetti - A Stimulus controller for adding confetti animations. (**Awesome Hotwire** [](https://github.com/sindresorhus/awesome) / Stimulus)
README
# Stimulus confetti
Are you in the mood to add confetti to your stimulus application? You're in luck! This package helps you do that in no-time.
## Install
Add the package to your project.
```bash
yarn add stimulus-confetti
# or
npm install stimulus-confetti
```
## Register the stimulus controller
Register the controller in your Stimulus app.
```javascript
import { Confetti } from "stimulus-confetti"
application.register('confetti', Confetti)
```
## Use the DOM
```html
Star Avo
```
When you click that link, the confetti will spray and after the animation finishes, the browser will navigate to that location.
## Animation types
There are three types of animation. Note: actions should match animation values.
1. **Basic** which shoots of confetti under your mouse
```html
Star Avo
```
2. **School pride** which adds two cannons on each side of the screen
```html
Star Avo
```
3. **Stars** which will spray stars from under your cursor
```html
Star Avo
```
## Configuration
### `data-confetti-animation-value`
Values can be `basic`, `school-pride`, or `stars` and will change the type of animation.
Defaults to `basic`.
### `data-confetti-follow-value`
Controls whether at the end of the animation, the browser should follow the link. You can set it to `false` when you want to test the animation.
Defaults to `true`.
### `data-confetti-duration-value`
The duration, in seconds, for the **School pride** animation.
Defaults to `5`.
### `data-confetti-first-color-value`
The first color for the **School pride** animation.
Defaults to `#0886DE`
### `data-confetti-second-color-value`
The second color for the **School pride** animation.
Defaults to `#FF6154`
### `data-confetti-debug-value`
Controls wether log messages are being displayed in the console.
Defaults to `false`.
### `data-confetti-particleCount-value`, `data-confetti-startVelocity-value`, `data-confetti-spread-value`, and `data-confetti-ticks-value`
Controls various setting for the [`canvas-confetti`](https://github.com/catdad/canvas-confetti) package.
## Thanks
This package is based on the [`canvas-confetti`](https://github.com/catdad/canvas-confetti) package, so please [donate](https://github.com/sponsors/catdad) to help them and support their work.
## Other packages
- [`class_variants`](https://github.com/avo-hq/class_variants) - Easily configure styles and apply them as classes. Very useful when you're implementing Tailwind CSS components and call them with different states.
- [`avo`](https://github.com/avo-hq/avo) - Build Content management systems with Ruby on Rails
## Try Avo ⭐️
If you enjoy this package try out Avo. It helps developers build internal tools, admins, CMSes, CRMs, and any other type of business apps 10x faster on top of Ruby on Rails.
[](https://github.com/avo-hq/avo)