Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    Tomasz ŁakomyTomasz Łakomy
    reactReact

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 We have a simple React application, which is basically like mini Twitter. We have a post over here -- it says that egghead.io is awesome -- and we have a button which allows us to like a tweet. Basically, I can click this button, and it's going to say that the post has been liked.

    00:14 It works because we are displaying a different message depending on this isLike state, by default set to false. If I click on the like button, it's going to be set to true. We would like to be able to somehow reward our users for performing certain actions on our web page, so that they will be more likely to come and visit us in the future.

    00:33 To do that, first import reward from react-rewards. Next, we're going to wrap our button component in a reward component, so our users will be rewarded when they are going to click the button. The reward component needs a reference to this button, which we are going to use in just a minute.

    00:52 I'm going to set this.reward to be this reference to this button, and I'm going to set the type of reward to confetti. Here in this processLike function, which is executed whenever I click the button, we are going to call this.reward.rewardMe.

    01:08 Let's save it and see it in action. If I click this button to like a tweet, I'm going to see confetti. To be fair, it just makes me want to click this button again and again, because I have this instant reward. react-rewards also support a different type of reward, which is emoji.

    01:24 If I change the type to emoji, and I'm going to click this button, I'm going to see all those emojis that are happy that I clicked this button. The first supported reward type is Memphis, which is going to produce those fireworks whenever I click this button.

    01:37 We can also configure the reward. For instance, if I were to go back to emoji, I can also provide a config object. For instance, we may want to disable the animation on the button itself. To do that, set the SpringAnimation property to false.

    01:53 Now, if I click the button, I'm going to see all those emojis, but the button itself is not going to move. If I change it back to SpringAnimation equals to true, we can see that we have those emojis, and also that the button has been moving.

    02:04 We can also control how many elements are going to be displayed. To do that, use the elementCount property. For instance, if I were to set it to 1,000, I'm going to see a whole lot of emoji. It's going to basically clear my browser.

    02:20 If I were to change it to one element, I'm going to see this one emoji popping up whenever I click the button.

    Discuss

    Discuss