Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-confetti
Advanced tools
The react-confetti package is a React component that allows you to easily add confetti animations to your web applications. It is highly customizable and can be used to celebrate events, achievements, or any other occasion that calls for a festive touch.
Basic Confetti Animation
This feature allows you to add a basic confetti animation to your React application with minimal setup. Simply import the Confetti component and include it in your JSX.
import React from 'react';
import Confetti from 'react-confetti';
const BasicConfetti = () => (
<Confetti />
);
export default BasicConfetti;
Customizable Confetti
This feature allows you to customize various aspects of the confetti animation, such as the number of pieces, gravity, and colors. This makes it easy to tailor the animation to fit the theme of your application.
import React from 'react';
import Confetti from 'react-confetti';
const CustomConfetti = () => (
<Confetti
width={window.innerWidth}
height={window.innerHeight}
numberOfPieces={500}
gravity={0.1}
colors={['#ff0', '#f0f', '#0ff']}
/>
);
export default CustomConfetti;
Controlled Confetti
This feature allows you to control when the confetti animation is active. In this example, a button is used to toggle the confetti animation on and off, providing a more interactive experience for users.
import React, { useState } from 'react';
import Confetti from 'react-confetti';
const ControlledConfetti = () => {
const [isConfettiActive, setIsConfettiActive] = useState(false);
return (
<div>
<button onClick={() => setIsConfettiActive(!isConfettiActive)}>
Toggle Confetti
</button>
{isConfettiActive && <Confetti />}
</div>
);
};
export default ControlledConfetti;
canvas-confetti is a lightweight library for creating confetti animations using the HTML5 canvas element. It offers a high degree of customization and can be used in any JavaScript project, not just React. Compared to react-confetti, it requires more manual setup but offers greater flexibility.
react-particles-js is a React component for creating particle animations, including confetti-like effects. It is highly customizable and can be used to create a wide range of particle animations. While it is more versatile than react-confetti, it may be more complex to set up for simple confetti animations.
react-snowfall is a React component specifically designed for creating snowfall animations, but it can be customized to create confetti-like effects. It is simpler to use than react-confetti but is more limited in terms of customization options.
Confetti without the cleanup. Demo
Based on a pen by @Gthibaud: http://codepen.io/Gthibaud/pen/BoaBZK
npm i -S react-confetti
import Confetti from 'react-confetti'
import React from 'react'
export default class MyComponent extends React.Component {
render() {
return (
<div>
<h1>My Component contents</h1>
<Confetti />
</div>
)
}
}
In order to maintain the aspect ratio of the canvas, you need to update the width
and height
props of the component when the window resizes. react-dimensions is a library to help you do this. See the source for the docs for an example or implement like so:
import React from 'react'
import Confetti from 'react-confetti'
import Dimensions from 'react-dimensions'
export default Dimensions()(class MyComponent extends React.PureComponent {
render() {
return (
<Confetti
width={this.props.containerWidth}
height={this.props.containerHeight}
/>
)
}
})
Property | Type | Default | Description |
---|---|---|---|
width | Number or String | '100%' | Width of the <canvas> element. |
height | Number or String | '100%' | Height of the <canvas> element. |
numberOfPieces | Number | 200 | Number of confetti pieces at one time. |
friction | Number | 0.99 | |
wind | Number | 0 | |
gravity | Number | 0.1 | |
colors | Array of String | ['#f44336' '#e91e63' '#9c27b0' '#673ab7' '#3f51b5' '#2196f3' '#03a9f4' '#00bcd4' '#009688' '#4CAF50' '#8BC34A' '#CDDC39' '#FFEB3B' '#FFC107' '#FF9800' '#FF5722' '#795548'] | All available Colors for the confetti pieces |
opacity | Number | 1.0 |
FAQs
React component to draw confetti for your party.
The npm package react-confetti receives a total of 1,600,064 weekly downloads. As such, react-confetti popularity was classified as popular.
We found that react-confetti demonstrated a not healthy version release cadence and project activity because the last version was released 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.