https://github.com/adamansubtractm/confetti

A package that allows you to throw confetti on the page.
https://github.com/adamansubtractm/confetti

Last synced: 8 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/adamansubtractm/confetti
• Owner: AdamAnSubtractM
• License: gpl-3.0
• Created: 2024-03-18T02:38:24.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-02T02:43:04.000Z (8 months ago)
• Last Synced: 2024-04-15T22:47:43.752Z (7 months ago)
• Language: TypeScript
• Size: 53.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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',

  })

})

```