[React] Use react-rewards to add microinteractions to React app to reward users for some actions

It's important that our users enjoy using our application or website. One way we can make it happen is by adding microinteractions to subtly reward our users for performing certain actions.

In this quick lesson we are going to learn how to use react-rewards to add microinteractions (such as rain of confetti or emojis) to a simple React application.

 

Install:

npm i --save react-rewards

 

Wrap a button into Reware component:

        <Reward
          ref={ref => {
            this.reward = ref;
          }}
          type="emoji"
          config={{
            springAnimation: false,
            elementCount: 8
          }}
        >
          <button onClick={this.processLike}>
            {!this.state.isLiked ? "Like this tweet ✅" : "Post liked, yay! 🙌"}
          </button>
        </Reward>

 

Then call:

this.reward.rewardMe();

Whenever the reward is necessary.