thedevelobear/react-rewards

how to add custom emoji

bilalturkmen opened this issue · 2 comments

bilalturkmen commented

Hello,
thanks for the nice package.
how to add custom emoji? it might be helpful add an example to the document.

i tried like below. is this the right way?

import { useReward } from 'react-rewards';
...
const { reward: confettiReward, isAnimating } = useReward(
    "rewardId",
    "emoji",
    {
      emoji: ["⚡️", "💥", "✨", "💫", "🌸", "🌟"],
    }
  );
...
<button
    disabled={isConfettiAnimating}
    onClick={() => {
        confettiReward();
    }}
>
    <span id="confettiReward" />
    🎉
</button>
AnaBelenBernardez commented

Here is an example that works for me 💜:

import { useReward } from "react-rewards";
. . . 
const { reward: confettiReward, isAnimating } = useReward(
    "rewardId",
    "emoji",
    {
      emoji: ["⚡️", "✨", "💜", "🚀"],
    }
  );
. . . 
<button 
        disabled={isAnimating} 
        onClick={() => {
                 confettiReward();
         }}
>
         <span id="rewardId" />
            💜
</button>
  • 👍1
bilalturkmen commented

thank you Ana,
We can also use some settings in the readme file

example

 const { reward: confettiReward, isAnimating } = useReward("rewardId", "emoji", {
    emoji: ["⚡️", "💥", "✨", "💫", "🌸", "🌟", "🌂"],
    elementSize: 15,
    elementCount: 60,
    lifetime: 100,
  });

very nice package 😊

  • 🎉1