7

Github GitHub - loonywizard/js-confetti: 🎉 Lightweight zero-config JS Confetti l...

 3 years ago
source link: https://github.com/loonywizard/js-confetti
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

tada JavaScript Confetti library

white_check_mark Zero dependencies used
white_check_mark Works without any config
white_check_mark Has TypeScript typings
white_check_mark Confetti speed adapts to user screen width

Links: GitHub | Library Website | CodeSandbox Playground

Usage

Install library via yarn or npm

yarn add js-confetti

Initialize instance of JSConfetti class and call addConfetti method

import JSConfetti from 'js-confetti'

const jsConfetti = new JSConfetti()

jsConfetti.addConfetti()

warning Attencion warning new JSConfetti() creates HTML Canvas element and adds it to page, so call it only once!

Customise confetties

addConfetti method accepts args object with the following params:

Prop Type Description Default value confettiRadius number Radius of confetti shape in pixels 8 confettiesNumber number Number of confetties to fire 200 confettiColors string[] Array of colors for confetti Array of RGB colors 
jsConfetti.addConfetti({
  confettiRadius: 8,
  confettiesNumber: 200,
  confettiColors: ['#fcf403', '#62fc03', '#f4fc03', '#03e7fc', '#03fca5', '#a503fc', '#fc03ad', '#fc03c2']
})

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK