Skip to content
A Vue component for dropping confetti
Branch: master
Clone or download
alexandermendes Merge pull request #31 from OskarDamkjaer/patch-2
Update installation command and add missing comma
Latest commit 8c8c110 Jul 19, 2019

README.md

vue-confetti

npm version semantic-release

🎉 A Vue component for dropping confetti 🎉

Example animation

View the demo

Installation

yarn add vue-confetti

Usage

<template>
  <main>
    <button @click="start">Start</button>
    <button @click="stop">Stop</button>
    <button @click="love">Show some love</button>
  </main>
</template>

<script>
  import Vue from 'vue'
  import VueConfetti from 'vue-confetti'

  Vue.use(VueConfetti)

  export default {
    methods: {
      start() {
        this.$confetti.start();
      },
      
      stop() {
        this.$confetti.stop();
      },
      
      love() {
        this.$confetti.update({
          particles: [
            {
              type: 'heart',
            },
            {
              type: 'circle',
            },
          ],
          defaultColors: [
            'red',
            'pink',
            '#ba0000'
          ],
        });
      }
    }
  }
</script>

Configuration

The following options can be passed to $confetti.start() or $confetti.update():

Property Type Description Default
particles Array The settings for each particle type (see below). 10
defaultType String The default particle type. 'circle'
defaultSize Number The default size of all particles (should be a positive number). 10
defaultDropRate Number The default speed at which the particles fall. 10
defaultColors Array The default particle colors. ['DodgerBlue', 'OliveDrab', 'Gold', 'pink', 'SlateBlue', 'lightblue', 'Violet', 'PaleGreen', 'SteelBlue', 'SandyBrown', 'Chocolate', 'Crimson']
canvasId String The ID for a custom canvas element (the default is to append a canvas to the <body> element). null
particlesPerFrame Number The number of particles to drop per animation frame. 2

The following options can be passed to each item in particles:

Property Type Description Default
type String The type of particle ('circle', 'rect', 'heart' or 'image'). 'circle'
size Number The size of the particles (should be a positive number). 10
dropRate Number The speed at which the particles fall. 10
colors Array The particle colors. ['DodgerBlue', 'OliveDrab', 'Gold', 'pink', 'SlateBlue', 'lightblue', 'Violet', 'PaleGreen', 'SteelBlue', 'SandyBrown', 'Chocolate', 'Crimson']
url String The path to a custom image or SVG to use as the particle. Note that type must be set to image. null

Examples

Red and pink hearts:

$confetti.start({
  particles: [
    {
      type: 'heart',
    }
  ],
  defaultColors: [
    'red',
    'pink',
    '#ba0000',
  ],
});

Custom image:

$confetti.start({
  particles: [
    {
      type: 'image',
      url: 'http://placekitten.com/50/50',
    },
  ],
});

Custom canvas:

$confetti.start({
  canvasId: 'my-custom-canvas',
});

Less particles per frame:

$confetti.start({
  particlesPerFrame: 0.25,
});

Multiple particle types:

$confetti.start({
  particles: [
    {
      type: 'heart',
      colors: [
        'red',
        'pink',
      ],
    },
    {
      type: 'circle',
      colors: [
        '#ba0000',
      ],
    },
    {
      type: 'image',
      size: 15,
      url: 'http://example.org/my-icon.svg',
    },
  ],
  defaultDropRate: 5,
  defaultSize: 5,
});

Development

The following scripts are available for local development:

# test
yarn run test

# run with webpack watch
yarn run dev

# build for production
yarn run build

# serve the demo page (watch for changes from another terminal)
yarn run demo

Note that vue-confetti enforces conventional commits to help automate the release process. Whenever code is merged into master the next semantic version number is automatically determined, a changelog generated and the release published.

You can’t perform that action at this time.