react-rewardsでボタンにクラッカーアニメーション

完成イメージ

「いいね」ボタンを押してみてください🙏

使用ライブラリ

npm install react-rewards

使い方

import { useReward } from "react-rewards";

export const RewardButton = () => {
  const { reward } = useReward("rewardId", "confetti");
  // confettiが花吹雪で、emozi(絵文字)やbaloons(風船)も指定可能
  // その他、第三引数にオプションを指定することも可能

  const handleClick = () => {
    reward();
  };

  return (
    <>
      <button onClick={handleClick}>ボタン</button>

      {/* ↓のspanタグにアニメーションがレンダリングされる */}
      <span id="rewardId" />
    </>
  );
};

ボタンクリック以外でも、いろんな場面で使えます。

絵文字の数や速度や発射角度も第三引数のconfigで指定できそうです。