thedevelobear / react-rewards Goto Github PK

I'm aware of this issue and I'll fix it in the upcoming release. Here's an example of the code that doesn't work at the moment:

const SomeAsyncScreen = () => {
  const [ data, setData ] = useState(undefined);
  const { reward, isAnimating } = useReward("rewardId", "confetti");

  useEffect(() => {
    setTimeout(() => {
      setData({});
    }, 500);
  }, []);

  if (!data) return "Loading...";

  return (
    <div className="App">
      <span id="rewardId" /> 
      <button disabled={isAnimating} onClick={reward}>
        Make it rain!
      </button>
    </div>
  );
};

The problem is that the element is grabbed in useLayoutEffect, which fires synchronously after all DOM mutations. In this case there's no element with an id === "rewardId" on mount.

While I'm working on that, a possible solution would be to bring the target element one level up, or always render the element and make other parts of the screen conditional, like so:

const SomeAsyncScreen = () => {
  const [ data, setData ] = useState(undefined);
  const { reward, isAnimating } = useReward("rewardId", "confetti");

  useEffect(() => {
    setTimeout(() => {
      setData({});
    }, 500);
  }, []);

  return (
    <div className="App">
      <span id="rewardId" /> 
      {data && <SomeDataDependentJsx/>} 
      <button disabled={isAnimating} onClick={reward}>
        Make it rain!
      </button>
    </div>
  );
};

Hi all, I'm trying to run confetti on page load after a user pays for a product successfully. As such, I need to run the reward as soon as the payment confirmation page loads.

I wasn't able to get this to work with useEffect. Is this only possible via an onClick event?

The neutrino build setup doesn't compile down arrow functions which breaks for IE11.
Just wondering if you would consider using a more compatible build preset?

Similar possibly to #97

Was developing on my mac and got a normal animation speed. Moved to my desktop (240hz refresh rate monitor) and the animation speed increased 10 fold.

For a university school project I will be making some edits to your documentation which will aim to make writing more technical

Please add edits if you would like :)

At the end of animation, you can see scrollbars

Is it possible to trigger rewards from within a hook, similar to how react-toastify works? (https://www.npmjs.com/package/react-toastify)

Hi,

Can you please add support for react 18?

Hey,

I use this package already for a long time, but in the meantime the animation speed increased. It's like it spead up to double so fast or even more. I thought about the config parameter "lifetime", but that just changes the lifetime not the animation speed lol.

This is my code:

           <Reward
                ref={ref}
                type='emoji'
                config={{
                    elementCount: 12,
                    angle: 80,
                    springAnimation: false,
                    emoji: rewardEmojis
                }}
            >
... some other Components...
            </Reward>

I call the methods like that box.target.checked ? ref.current.rewardMe() : ref.current.punishMe();

Well, am I missing something or do something wrong? How can I make the animation slower?

Awesome library, love it!

However, the following code doesn't work as one would expect (it keeps rewarding me over and over):

useEffect(() => {
	if (step === 1) {
		reward();
	}
}, [step, reward]);

Seems like reward() would benefit from being memoized with useCallback.

Would be cool to have types built into this package

react-rewards looks really cool, but I'm getting this when installing:

Before adding react-rewards:

audited 7230 packages in 7.906s
found 0 vulnerabilities

After:

audited 140631 packages in 26.794s
found 17 vulnerabilities (14 moderate, 3 high)

All of these stem from neutrino related packages. Should neutrino really be part of what's published on npm? I'm guessing you are using for the demo page.

Using this in React. All works well locally but when pushed to production the following error is thrown: TypeError: Cannot set property 'fillStyle' of null

How can I go about resolving this canvas related issue?

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>

Hi,

It's a great and simple to use library for rewarding users!
I'm wondering if it's possible as for the rewards to configure the punishment (timing, velocity ...)

It would be useful to have a balloon variant of the emoji reward, use case would be to use ['❤️', '🩷'] as a heart balloon.

Thanks!

React 17 isn't supported in the npm listing

Can I explode twitter emojis? Currently, I've just found a way to explode only native emojis. I want to explode same emoji graphics on every device. And how do I change the position of which explosion will happen?

Once again, NICE PACKAGE!
Thanks!

ES6 not supported by uglify which is used in react-create-app

Its a wonderful NPM. Working like a charm. I have one issue. After triggering react-rewards in confeitti mode, my stickers flowing back side of the DIV elements. So I cant able to see the stickers properly. My Expectation is it should come infront all other elements. Any suggestions?

Hello,

Wondered if you could point me in the right direction. Do you know why this package seems a little large?

https://bundlephobia.com/[email protected]

Is it just due to the other dependencies it uses from the readme?

Thanks

Hey,

Is there any way creating a snow effect or something like that?