react-confetti

Confetti without the cleanup. Demo

Based on a pen by @Gthibaud: https://codepen.io/Gthibaud/pen/ENzXbp

Install

npm i -S react-confetti

Use

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'))

Props

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