react-confetti

Confetti without the cleanup. Demo

Based on a pen by @Gthibaud: http://codepen.io/Gthibaud/pen/BoaBZK

Install

npm i -S react-confetti

Use

import Confetti from 'react-confetti'
import React from 'react'

export default class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>My Component contents</h1>
        <Confetti />
      </div>
    )
  }
}

Dimensions and Aspect Ratio

In order to maintain the aspect ratio of the canvas, you need to update the width and height props of the component when the window resizes. react-dimensions is a library to help you do this. See the source for the docs for an example or implement like so:

import React from 'react'
import Confetti from 'react-confetti'
import Dimensions from 'react-dimensions'

export default Dimensions()(class MyComponent extends React.PureComponent {
  render() {
    return (
      <Confetti
        width={this.props.containerWidth}
        height={this.props.containerHeight}
      />
    )
  }
})

Props