qwik-rewards v0.1.2

This package is a port of react-rewards.

Demo

Here is a simple demo and here's the code for the demo.

About

qwik-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 this blog – https://www.thedevelobear.com/post/microinteractions/

Installation

pnpm install qwik-rewards

or

bun add qwik-rewards

or

npm install qwik-rewards

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

You can use this package in both the composition API and the options API.

Using the Qwik Component

import { component$ } from '@builder.io/qwik';
import { useReward } from '../../hooks/useReward';

export default component$(() => {
  const config = {
    startVelocity: 10,
    spread: 180,
    elementCount: 100,
    // etc...
    // you can make this reactive instead etc.
  };

  // useReward has the following arguments:
  // userReward(id, type, config)
  // type can be one of 'confetti', 'balloons' or 'emoji'
  // no need to add # before the id
  // see below for all of the config options
  // to trigger the animation, call the reward function
  // isAnimating is a boolean that is true when the animation is running

  // you can trigger the animation onclick
  // I have renamed reward to balloonsReward etc.
  const { reward: balloonsReward, isAnimating: isBalloonsAnimating } =
    useReward('some-id', 'balloons', config);

  return (
    <div>
      <span id="some-id">My Container!</span>

      <button onClick$={() => balloonsReward()}>Reward</button>
    </div>
  );
});

Props & config

useReward/$reward params:

Confetti config object:

Balloons config object:

Emoji config object: