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: https://codepen.io/Gthibaud/pen/ENzXbp
npm i -S react-confetti
width
and height
props are required. Here, they are provided by react-sizeme:
import PropTypes from 'prop-types'
import React from 'react'
import ReactDOM from 'react-dom'
import sizeMe from 'react-sizeme'
import Confetti from './react-confetti'
const DimensionedExample = sizeMe({
monitorHeight: true,
monitorWidth: true,
})(class Example extends React.PureComponent {
static propTypes = {
size: PropTypes.shape({
width: PropTypes.number,
height: PropTypes.number,
}),
}
render() {
return (
<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
<Confetti {...this.props.size} />
</div>
)
}
})
ReactDOM.render(<DimensionedExample />, document.getElementById('app'))
Property | Type | Default | Description |
---|---|---|---|
width | Number | '100%' | Width of the <canvas> element. |
height | Number | '100%' | Height of the <canvas> element. |
numberOfPieces | Number | 200 | Number of confetti pieces at one time. |
confettiSource | { x: Number, y: Number, w: Number, h: Number } | {x: 0, y: 0, w: canvas.width, h:0} | Rectangle where the confetti should spawn. Default is across the top. |
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 | |
recycle | Bool | true | Keep spawning confetti after numberOfPieces pieces have been shown. |
run | Bool | true | Run the animation loop |
FAQs
React component to draw confetti for your party.
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.