JSPM

  • Created
  • Published
  • Downloads 2534798
  • Score
    100M100P100Q207745F
  • License MIT

React component to draw confetti for your party.

Package Exports

  • react-confetti

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-confetti) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-confetti

Confetti without the cleanup. Demo

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

demogif

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