react-confetti's Introduction

react-confetti

Confetti without the cleanup. Demo

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

Install

npm install react-confetti

Use

width and height props are recommended. They will default to the initial window dimensions, but will not respond to resize events. It is recommended to provide the dimensions yourself. Here is an example using a hook:

import React from 'react'
import { useWindowSize } from 'react-use'
import Confetti from 'react-confetti'

export default () => {
  const { width, height } = useWindowSize()
  return (
    <Confetti
      width={width}
      height={height}
    />
  )
}

Props

Property	Type	Default	Description
`width`	`Number`	`window.innerWidth \|\| 300`	Width of the `<canvas>` element.
`height`	`Number`	`window.innerHeight \|\| 200`	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

Recommend Projects