Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@neoconfetti/vue
Advanced tools
Let's party ๐๐ with Vue! @neoconfetti/vue
allows you to show an awesome confetti explosion on your page, with Vue!
v-confetti
rather than setting things up in mounted()
hook.# pnpm
pnpm add @neoconfetti/vue
# npm
npm install @neoconfetti/vue
# yarn
yarn add @neoconfetti/vue
Basic usage:
<script>
import { vConfetti } from '@neoconfetti/vue';
</script>
<div v-confetti />
Customizing behavior with options:
<div v-confetti="{ particleCount: 200, force: 0.3 }" />
There's tons of options available for this package. All of them are already documented within the code itself, so you'll never have to leave the code editor.
Number of confetti particles to create.
type: number
Default value: 150
Example:
<div v-confetti="{ particleCount: 200 }" />
Size of the confetti particles in pixels
type: number
Default value: 12
Example:
<div v-confetti="{ particleSize: 20 }" />
Shape of particles to use. Can be mix
, circles
or rectangles
mix
will use both circles and rectangles
circles
will use only circles
rectangles
will use only rectangles
type: 'mix' | 'circles' | 'rectangles'
Default value: 'mix'
Example:
<div v-confetti="{ particleShape: 'circles' }" />
Duration of the animation in milliseconds
type: number
Default value: 3500
Example:
<div v-confetti="{ duration: 5000 }" />
Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors, CSS Variables, literally anything valid in plain CSS.
type: Array<string>
Default value: ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
Example:
<div v-confetti="{ colors: ['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7'] }" />
Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.
type: number
Default value: 0.5
Example:
<div v-confetti="{ force: 0.3 }" />
Height of the stage in pixels. Confetti will only fall within this height.
type: number
Default value: 800
Example:
<div v-confetti="{ stageHeight: 500 }" />
Width of the stage in pixels. Confetti will only fall within this width.
type: number
Default value: 1600
Example:
<div v-confetti="{ stageWidth: 500 }" />
Whether or not destroy all confetti nodes after the duration
period has passed. By default it destroys all nodes, to free up memory.
type: boolean
Default value: true
Example:
<div v-confetti="{ destroyAfterDone: false }" />
Changing the options will destroy the existing confetti mid-flight, and create a new one with the new options. Exception: If particlesCount
isn't changed, and properties like colors
or particleShape
is changed, the confetti particles will change their colors or shape mid-flight.
This library functions by creating 2 DOM nodes for every single confetti. By default, if the particlesCount
is set to 150, it will create 300 nodes. This is a lot of nodes. For most devices, these many nodes are not a big issue, but I recommend checking your target devices' performance if you choose to go with a higher number, like 400 or 500.
Also, after the specified duration
, all the confetti DOM nodes will be destroyed. This is to free up memory. If you wish to keep them around, set destroyAfterDone
to false
.
This library is the port of the amazing react-confetti-explosion package, just 10X smaller and faster. All the logic is from that package only, optimisation and Svelte code are mine ๐
MIT License ยฉ Puru Vijay
FAQs
Confetti explosion in Vue ๐๐
The npm package @neoconfetti/vue receives a total of 451 weekly downloads. As such, @neoconfetti/vue popularity was classified as not popular.
We found that @neoconfetti/vue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.ย It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.