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

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

 

Then call:

this.reward.rewardMe();

Whenever the reward is necessary.