Installation

npm i react-canvas-confetti

❗ It is expected that the react is already installed as peer dependency.

Usage

I recommend that you first familiarize yourself with the canvas-confetti library to better understand exactly how this module works.

There are two ways to use this module:

Working with Presets

A preset is an animation template that is already ready to use. Presets allow you to customize animation settings, but do not allow you to change the animation algorithm. Using presets is an easier way to work with the module.

An example of the minimum required code:
import Fireworks from "react-canvas-confetti/dist/presets/fireworks";

function Example() {
  return <Fireworks autorun={{ speed: 3 }} />;
}

export default Example;

Live example

Conductor Instance

The preset working can be controlled manually using the Conductor instance. This object allows you to start and stop animations on demand. Conductor can be accessed in the onInit callback. The interface of the object is shown below:

type TRunAnimationParams = {
  speed: number;
  duration?: number;
  delay?: number;
};

type TConductorInstance = {
  run: (params: TRunAnimationParams) => void;
  shoot: () => void;
  pause: () => void;
  stop: () => void;
};

Working with the canvas-confetti instance

Working with an instance is working with the module at a lower level. This is a more powerful approach that allows you to create your own animation algorithms, but requires more effort.

Canvas-confetti instance

Confetti object, which will be received as a result of calling the function create. Gives you full control to create your own animations. Confetti can be accessed in the onInit callback. The interface can be viewed here

API

Base API

The common settings are relevant for all use cases

Name Type Description
width string | number value is responsible for the width of the canvas. Alternative ways to control canvas sizes are className and style props.
height string | number value is responsible for the height of the canvas. Alternative ways to control canvas sizes are className and style props.
className string value to set className to canvas element
style CSSProperties value to set style to canvas element. If style and className are not passed, the default styles will be set
globalOptions TGlobalOptions global animation settings that cannot be changed after initialization (details)
onInit (params: {confetti: TCanvasConfettiInstance}) => void the callback is called when the component is mounted on the page and allows you to access confetti instance (details) for manual animation creation

Advanced API

Advanced settings only work for presets!

Name Type Description
autorun { speed: number; duration?: number; delay?: number; } if it is passed, it automatically starts the animation when mounting the component on the page
decorateOptions (options: TOptions) => TOptions the callback allows you to customize the animation settings and is called for each step of the animation
onInit (params: { confetti: TCanvasConfettiInstance; conductor: TConductorInstance }) => void the callback is called when the component is mounted on the page and allows you to access objects for manual creation and animation control

Examples

Fireworks Preset

Crossfire Preset

Snow Preset

Realistic Preset

Explosion Preset

Pride Preset

Vortex Preset

Photons Preset

Manual Control

Decorating Options

Custom Stylization

Custom Animation