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!