Confetti without the cleanup. Demo
Based on a pen by @Gthibaud: https://codepen.io/Gthibaud/pen/ENzXbp
npm i -S react-confettiwidth 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 |