React component to draw confetti for your party.

Usage no npm install needed!

<script type="module">
  import vestwellReactConfetti from 'https://cdn.skypack.dev/@vestwell/react-confetti';



Build Status npm

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} />

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