Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to add custom emoji #95

Open
bilalturkmen opened this issue Feb 27, 2023 · 2 comments
Open

how to add custom emoji #95

bilalturkmen opened this issue Feb 27, 2023 · 2 comments

Comments

@bilalturkmen
Copy link

bilalturkmen commented Feb 27, 2023

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
Copy link

AnaBelenBernardez commented Jul 5, 2023

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>

@bilalturkmen
Copy link
Author

bilalturkmen commented Jul 5, 2023

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 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants