Home

Awesome

react-rewards logo

npm version forthebadge

:evergreen_tree: Tree-shakeable :female_detective: Built with TypeScript :package: 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

<p align="center"> <img alt='confetti demo gif' src="assets/confetti.gif"/> </p>

Balloons

<p align="center"> <img alt='balloons demo gif' src="assets/balloons.gif"/> </p>

Emoji

<p align="center"> <img alt='emoji demo gif' src="assets/emoji.gif"/> </p>

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:

nametypedescriptionrequireddefault
idstringA unique id of the element you want to shoot fromyes
typestring'confetti''balloons''emoji'
configobjecta configuration object described belownosee below

Confetti config object:

nametypedescriptiondefault
lifetimenumbertime of life200
anglenumberinitial direction of particles in degrees90
decaynumberhow much the velocity decreases with each frame0.94
spreadnumberspread of particles in degrees45
startVelocitynumberinitial velocity of particles35
elementCountnumberparticles quantity50
elementSizenumberparticle size in px8
zIndexnumberz-index of particles0
positionstringone of CSSProperties['position'] - e.g. "absolute""fixed"
colorsstring[]An array of colors used when generating confetti['#A45BF1', '#25C6F6', '#72F753', '#F76C88', '#F5F770']
onAnimationComplete() => voidA function that runs when animation completesundefined

Balloons config object:

nametypedescriptiondefault
lifetimenumbertime of life600
anglenumberinitial direction of balloons in degrees90
decaynumberhow much the velocity decreases with each frame0.999
spreadnumberspread of balloons in degrees50
startVelocitynumberinitial velocity of the balloons3
elementCountnumberballoons quantity10
elementSizenumberballoons size in px20
zIndexnumberz-index of balloons0
positionstringone of CSSProperties['position'] - e.g. "absolute""fixed"
colorsstring[]An array of colors used when generating balloons['#A45BF1', '#25C6F6', '#72F753', '#F76C88', '#F5F770']
onAnimationComplete() => voidA function that runs when animation completesundefined

Emoji config object:

nametypedescriptiondefault
lifetimenumbertime of life200
anglenumberinitial direction of emoji in degrees90
decaynumberhow much the velocity decreases with each frame0.94
spreadnumberspread of emoji in degrees45
startVelocitynumberinitial velocity of emoji35
elementCountnumberemoji quantity20
elementSizenumberemoji size in px25
zIndexnumberz-index of emoji0
positionstringone of CSSProperties['position'] - e.g. "absolute""fixed"
emojistring[]An array of emoji to shoot['🤓', '😊', '🥳']
onAnimationComplete() => voidA function that runs when animation completesundefined