A package containing a few micro-interactions you can use to reward your users for little things and make them smile!
Fix useRewards hook that didn't work with async components.
Here's an example of the code that didn't work in v2.0.0/v2.0.1/v2.0.2:
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 was that the element was grabbed in useLayoutEffect, which fired synchronously after all DOM mutations. In this case there was no element with an id === "rewardId" on mount.
The problem was fixed in this release.
EDIT: This release contains an issue with useReward hook not finding an element in asynchronous components (https://github.com/thedevelobear/react-rewards/issues/83).
It was fixed in v2.0.3 (https://github.com/thedevelobear/react-rewards/releases/tag/v2.0.3)
v2.0.0 is here!
EDIT: This release introduced an issue with useReward hook not finding an element in asynchronous components (https://github.com/thedevelobear/react-rewards/issues/83). It was fixed in v2.0.3 (https://github.com/thedevelobear/react-rewards/releases/tag/v2.0.3)
Full Changelog: https://github.com/thedevelobear/react-rewards/compare/v1.1.2...v2.0.0
Full Changelog: https://github.com/thedevelobear/react-rewards/commits/v1.1.2