:sparkles: GPU-rendered: WebGL2, with a Canvas 2D fallback
:evergreen_tree: Tree-shakeable: about 7 kB gzipped for useReward and confetti
:female_detective: Built with TypeScript
:stopwatch: Frame-rate independent, and quiet for people who prefer reduced motion
React-rewards lets you add micro-interactions to your app, and rewards users with the rain of confetti, emoji, balloons or fireworks 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/
Docs and demo
thedevelobear.github.io/react-rewards has every effect live, with its settings and the code for what you pick, and the docs:
Installation
pnpm add react-rewards
# or
npm install react-rewards
# or
yarn add react-rewards
React 18 or later. The package is ESM only.
Usage
Give useReward a ref to the element a reward starts from, and an effect. Each call to reward() fires a burst from the centre of that element.
import { useRef } from 'react';
import { confetti, useReward } from 'react-rewards';
export const RewardButton = () => {
const ref = useRef<HTMLButtonElement>(null);
const { reward, isAnimating } = useReward(ref, confetti);
return (
<button ref={ref} type="button" onClick={() => reward()}>
{isAnimating ? 'Yay!' : 'Reward me'}
</button>
);
};
The effects are confetti, emoji, balloon and firework, and each has its settings on its page of the docs.
Contributing
The repo uses pnpm, and records its decisions in docs/. Start with AGENTS.md for the commands.
License
MIT
