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

Tomasz Łakomy
InstructorTomasz Łakomy
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

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.

egghead
egghead
~ 5 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today