Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-confetti

Package Overview
Dependencies
Maintainers
1
Versions
34
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-confetti

A Vue component for dropping confetti.

  • 2.0.11
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
13K
increased by6.7%
Maintainers
1
Weekly downloads
 
Created
Source

vue-confetti

npm version semantic-release

:tada: A Vue component for dropping confetti :tada:

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>

Usage with Nuxt

As this plugin relies on browser globals, such as window, it will not work when server-side rendered. The following example shows how to get this to add as a client-side only plugin with Nuxt.

Register vue-confetti in your Nuxt plugins folder (e.g. at your-repo/plugins/vue-confetti):

import Vue from 'vue';
import VueConfetti from 'vue-confetti';

Vue.use(VueConfetti);

Register the plugin in your Nuxt config:

export default {
  plugins: [
    { src: '~/plugins/vue-confetti.js', mode: 'client' },
  ],
};

Configuration

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

PropertyTypeDescriptionDefault
particlesArrayThe settings for each particle type (see below).10
defaultTypeStringThe default particle type.'circle'
defaultSizeNumberThe default size of all particles (should be a positive number).10
defaultDropRateNumberThe default speed at which the particles fall.10
defaultColorsArrayThe default particle colors.['DodgerBlue', 'OliveDrab', 'Gold', 'pink', 'SlateBlue', 'lightblue', 'Violet', 'PaleGreen', 'SteelBlue', 'SandyBrown', 'Chocolate', 'Crimson']
canvasIdStringThe ID for a custom canvas element (the default is to append a canvas to the <body> element).null
particlesPerFrameNumberThe number of particles to drop per animation frame.2

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

PropertyTypeDescriptionDefault
typeStringThe type of particle ('circle', 'rect', 'heart' or 'image').'circle'
sizeNumberThe size of the particles (should be a positive number).10
dropRateNumberThe speed at which the particles fall.10
colorsArrayThe particle colors.['DodgerBlue', 'OliveDrab', 'Gold', 'pink', 'SlateBlue', 'lightblue', 'Violet', 'PaleGreen', 'SteelBlue', 'SandyBrown', 'Chocolate', 'Crimson']
urlStringThe 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.

FAQs

Package last updated on 29 Aug 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc