【React】紙吹雪ライブラリどっちを使う？react-confetti と canvas-confetti の違いと使い分け、ハマりどころを徹底解説

npm install react-confetti react-use

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

const BirthdayEffect = () => {
  // 画面のリサイズに合わせて紙吹雪の範囲を自動調整する
  const { width, height } = useWindowSize()

  return (
    <Confetti
      width={width}
      height={height}
      numberOfPieces={200} // 同時に舞う紙吹雪の数
      recycle={true}       // trueで無限ループ、falseで出し切り
      gravity={0.1}        // 落ちる速度（重力）
    />
  )
}

export default BirthdayEffect

// react-confetti をトリガーで使う例
{ isCelebrated && (
  <Confetti
    numberOfPieces={200}
    recycle={false} // ←ここをfalseにすると「1回出し切り」になる！
  />
)}

npm install canvas-confetti

import confetti from 'canvas-confetti';

const CelebrationButton = () => {
  const handleFire = () => {
    // 実行した瞬間にアニメーションが開始される
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 }, // 画面の下の方から発射
      colors: ['#ff0000', '#00ff00', '#0000ff']
    });
  };

  return (
    <button onClick={handleFire}>
      おめでとうを贈る！
    </button>
  );
};

import confetti from 'canvas-confetti';

const fireEmoji = () => {
  // 絵文字を「形」として定義する
  const scalar = 3; // 絵文字は小さいので scalar で大きくするのがコツ！
  const triangle = confetti.shapeFromText({ text: '🎂', scalar });
  const star = confetti.shapeFromText({ text: '✨', scalar });

  confetti({
    shapes: [triangle, star],
    particleCount: 40, // 絵文字は多すぎるとうるさいので少なめがおすすめ
    scalar
  });
};