Launch Confetti

npm i confetti-cannon

This is the basic use of the cannon where we render everything we need and then create confetti on the canvas where the user clicks. For more advanced uses, check out the stories.

import {
  ConfettiCanvas,
  Environment,
  SpriteCanvas,
  useConfettiCannon,
  ConfettiCanvasHandle,
  SpriteCanvasHandle,
} from "confetti-cannon";

const SPRITES = [
  require("./images/square.svg"),
  require("./images/circle.svg"),
];
const COLORS = ["#FF73FA", "#FFC0FF"];
const SIZE = 40;

function Example() {
  const [confettiCanvas, setConfettiCanvas] =
    React.useState<ConfettiCanvasHandle | null>(null);
  const [spriteCanvas, setSpriteCanvas] =
    React.useState<SpriteCanvasHandle | null>(null);
  const environment = React.useMemo(() => new Environment(), []);
  const cannon = useConfettiCannon(confettiCanvas, spriteCanvas);

  const addConfetti = React.useCallback(
    (x: number, y: number) => {
      cannon.createConfetti({
        position: {
          type: "static",
          value: { x, y },
        },
        size: {
          type: "static",
          value: SIZE,
        },
      });
    },
    [cannon]
  );

  const handleClick = (e: MouseEvent) => {
    const { x, y } = getClickPosition(e, confettiCanvas?.getCanvas());
    addConfetti(x, y);
  };

  return (
    <>
      <SpriteCanvas
        ref={setSpriteCanvas}
        sprites={SPRITES}
        colors={COLORS}
        spriteWidth={SIZE}
        spriteHeight={SIZE}
      />
      <ConfettiCanvas
        ref={setConfettiCanvas}
        onClick={handleClick}
        environment={environment}
      />
    </>
  );
}

A SpriteCanvas is used to pre-render your confetti. You'll need to render this somewhere in your app in order to launch confetti on an ConfettiCanvas. This will not be visible to users.

A ConfettiCanvas is the canvas that will render your confetti on screen

to create an Environment, use new Environment().

useConfettiCannon is the hook that will allow you to launch confetti. This takes a ConfettiCanvas and a SpriteCanvas and provides a few functions to create confetti.

There's several methods available to add and manage confetti on the canvas. Typically, you'll want to use createMultipleConfetti.

These are passed to createConfetti methods to create a confetti and define how it is updated. Each includes a type, which then defines the rest of the args.

Config Inputs Config inputs are helper objects that will eventually create an UpdatableValue that lives on Confetti that tells the Confetti how to update on every tick.

Valid types include:

• static: Will not change on updates (gravity and wind will still effect relevant fields)
• linear: Will update linearly on every update
• oscillating: Will oscillate between two values with a given easing

Each type also includes a -random option (ex: static-random) which allows you to add randomization with the initial value and the update values.

Any Vector2 or Vector3 will also accept a number as a shortcut to set all x, y, and z values to that number.

This is an optional object that will request that the canvas create a specific sprite or color. The sprite and color must be included on your sprite canvas for this to work.