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 |