@adam/confetti@2.0.0

Built and signed on GitHub Actions

Built and signed on GitHub Actions

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
# confetti

Version: [![JSR](https://jsr.io/badges/@adam/confetti)](https://jsr.io/@adam/confetti) Score: [![JSR Score](https://jsr.io/badges/@adam/confetti/score)](https://jsr.io/@adam/confetti)

A package that allows you to throw confetti on the page.

## Throwing confetti on the page

You can throw confetting on the page by writing the following:

```ts
import { throwConfetti } from '@adam/confetti'

const button = document.querySelector('#confetti-button')

button.addEventListenter('click', throwConfetti)
```

## Passing optional options

The throwConfetti function can also take an optional options object to control the behavior of the confetti and canvas.

- canvasId?: string
  - Queries for a custom canvasId if passed. If not found, it uses this id to generate a canvas.
- customStyles?: CSSStyleDeclaration
  - Allows an object of custom styles to be applied to the canvas.
- particleCount?: number
  - Allows for a custom number of particles to be generated on the canvas.
- secondsUntilDeletion?: number
  - Allows for the canvas to be auto deleted after the number of seconds defined here has passed.
- selectorToAppend?: string
  - Allows a custom selector to be defined for where the canvas is appended.

```ts
import { throwConfetti, defaultCanvasStyles } from '@adam/confetti'

const button = document.querySelector('#confetti-button')

button.addEventListenter('click', () => {
  throwConfetti({
    canvasId: 'custom-canvas-id',
    customStyles: {
      ...defaultCanvasStyles,
      width: '500px',
      height: '500px',
    },
    particleCount: 300,
    secondsUntilDeletion: 8,
    selectorToAppend: 'main',
  })
})
```