thedevelobear / react-rewards

A package containing a few micro-interactions you can use to reward your users for little things and make them smile!

🌲 Tree-shakeable 🕵️‍♀️ Built with TypeScript 📦 3.6kB gzipped

This package was inspired by react-dom-confetti.

React-rewards lets you add micro-interactions to your app, and rewards users with the rain of confetti, emoji or balloons in seconds. Firing confetti all over the page may seem like a questionable idea, but keep in mind that rewarding users for their actions is not. If a huge cloud of smiling emoji doesn't fit your application well, try changing the physics config to make it more subtle.

You can read more on the subject of micro-interactions in my blog post – https://www.thedevelobear.com/post/microinteractions/

Confetti

Balloons

Emoji

Installation

Install from npm by typing npm install react-rewards or yarn add react-rewards while in your package.json directory.

Usage

In order to use the rewards, you'll need to provide an element that will become the origin of the animation. This element needs to have an ID that matches the one used inside the hook - it can be anywhere in the DOM as long as the IDs match.

You can place the element inside a button, center it and shoot up from the button. You can place it on top of the viewport with position: "fixed" and change the angle to 270, to shoot downwards. Try, experiment, have fun!

Animation particles are set to position: 'fixed' by default, but this can be changed through a config object.

Single reward

TIP: Try using <span id=“rewardId” style={{width: 2, height: 2, background: “red”}} /> to place the element correctly, wherever you want. Then just remove the styles.

import { useReward } from 'react-rewards';
...
const { reward, isAnimating } = useReward('rewardId', 'confetti');
...
<button
    disabled={isAnimating}
    onClick={reward}
>
    <span id="rewardId" />
    🎉
</button>

Multiple rewards

TIP: You can use the same ID to shoot from the same spot, or provide separate elements with unique IDs.

import { useReward } from 'react-rewards';
...
const {reward: confettiReward, isAnimating: isConfettiAnimating} = useReward('confettiReward', 'confetti');
const {reward: balloonsReward, isAnimating: isBalloonsAnimating} = useReward('balloonsReward', 'balloons');
...
<button
    disabled={isConfettiAnimating || isBalloonsAnimating}
    onClick={() => {
        confettiReward();
        balloonsReward();
    }}
>
    <span id="confettiReward" />
    <span id="balloonsReward" />
    🎉
</button>

Props & config

useReward params:

name	type	description	required	default
id	string	A unique id of the element you want to shoot from	yes
type	string	'confetti'	'balloons'	'emoji'
config	object	a configuration object described below	no	see below

Confetti config object:

name	type	description	default
lifetime	number	time of life	200
angle	number	initial direction of particles in degrees	90
decay	number	how much the velocity decreases with each frame	0.94
spread	number	spread of particles in degrees	45
startVelocity	number	initial velocity of particles	35
elementCount	number	particles quantity	50
elementSize	number	particle size in px	8
zIndex	number	z-index of particles	0
position	string	one of CSSProperties['position'] - e.g. "absolute"	"fixed"
colors	string[]	An array of colors used when generating confetti	['#A45BF1', '#25C6F6', '#72F753', '#F76C88', '#F5F770']
onAnimationComplete	() => void	A function that runs when animation completes	undefined

Balloons config object:

name	type	description	default
lifetime	number	time of life	600
angle	number	initial direction of balloons in degrees	90
decay	number	how much the velocity decreases with each frame	0.999
spread	number	spread of balloons in degrees	50
startVelocity	number	initial velocity of the balloons	3
elementCount	number	balloons quantity	10
elementSize	number	balloons size in px	20
zIndex	number	z-index of balloons	0
position	string	one of CSSProperties['position'] - e.g. "absolute"	"fixed"
colors	string[]	An array of colors used when generating balloons	['#A45BF1', '#25C6F6', '#72F753', '#F76C88', '#F5F770']
onAnimationComplete	() => void	A function that runs when animation completes	undefined

Emoji config object:

name	type	description	default
lifetime	number	time of life	200
angle	number	initial direction of emoji in degrees	90
decay	number	how much the velocity decreases with each frame	0.94
spread	number	spread of emoji in degrees	45
startVelocity	number	initial velocity of emoji	35
elementCount	number	emoji quantity	20
elementSize	number	emoji size in px	25
zIndex	number	z-index of emoji	0
position	string	one of CSSProperties['position'] - e.g. "absolute"	"fixed"
emoji	string[]	An array of emoji to shoot	['🤓', '😊', '🥳']
onAnimationComplete	() => void	A function that runs when animation completes	undefined

react-rewards's Issues

Canvas Null Issue

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?

IE 11 support?

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?

Npm vulnerabilities warnings

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.

Memoize `reward`

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.

Add support for react 18

Hi,

Can you please add support for react 18?

Edits on documentation made for university student project

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 :)

Reward gives error of: 'findDOMNode is deprecated in StrictMode'

how to add custom emoji

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>

Trigger from anywhere?

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

Animation speed increases on different devices

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.

Wow, that's fast!

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?

Scroll showed when you use emoji reward

At the end of animation, you can see scrollbars

Is it possible to launch an effect on page load..?

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?

Making Snow using react-rewards

Hey,

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

Is it possible to configure the punishment?

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 ...)

feature request: emoji-balloon

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

Thanks!

No support for React 17

React 17 isn't supported in the npm listing

ES6 not supported by uglify

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

useReward can't find element if it's rendered conditionally

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>
  );
};

First of all NICE PACKAGE!

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!

Large package size

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

Confeitti Stickers are flowing back side of the DIV Elements

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?

How to use this with functional component

Add TypeScript support

Would be cool to have types built into this package