@vestwell/react-confetti

2.3.1 • Public • Published

react-confetti

Build Status npm

Confetti without the cleanup. Demo

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

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

/@vestwell/react-confetti/

    Package Sidebar

    Install

    npm i @vestwell/react-confetti

    Weekly Downloads

    1

    Version

    2.3.1

    License

    MIT

    Unpacked Size

    67.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • pushred