confetti-react v2.5.0

This is a fork

This is a fork of react-confetti from a time when the library was unsupported and the latest release was completely broken. It is my understanding that the original library is once again actively maintained.

confetti-react

Confetti without the cleanup.

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

Install

npm install confetti-react

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/lib/useWindowSize';
import Confetti from 'confetti-react';

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

Props

drawShape()

Draw a custom shape for a particle. If not provided, defaults to a random selection of a square, circle or strip confetto. The function is called with the canvas context as a parameter and the Particle as the this context.

For example, to draw all spirals:

<Confetti
  drawShape={ctx => {
    ctx.beginPath();
    for (let i = 0; i < 22; i++) {
      const angle = 0.35 * i;
      const x = (0.2 + 1.5 * angle) * Math.cos(angle);
      const y = (0.2 + 1.5 * angle) * Math.sin(angle);
      ctx.lineTo(x, y);
    }
    ctx.stroke();
    ctx.closePath();
  }}
/>