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!

[React] Use react-rewards to add microinteractions to React app to reward users for some actions的更多相关文章

  1. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

  2. React与ES6(四)ES6如何处理React mixins

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  3. react看这篇就够了(react+webpack+redux+reactRouter+sass)

    本帖将对一下内容进行分享: 1.webpack环境搭建: 2.如何使用react-router: 3.引入sass预编译: 4.react 性能优化方案: 5.redux结合react使用: 6.fe ...

  4. 玩转 React 【第03期】:邂逅 React 组件

    上期回顾 前文我们讲解了 React 模板 JSX,接着我们继续来看看 React 组件又是如何工作的呢? 组件化开发到了今天已经是大家的共识,在 React 中,组件同样也是组成我们整个项目的基本单 ...

  5. [React] Use the Fragment Short Syntax in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...

  6. Wait… What Happens When my React Native Application Starts? — An In-depth Look Inside React Native

    Discover how React Native functions internally, and what it does for you without you knowing it. Dis ...

  7. react 16.8版本新特性以及对react开发的影响

    Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React ...

  8. [React] Use React.cloneElement to Modify and Add Additional Properties to React Children

    In this lesson we'll show how to use React.cloneElement to add additional properties to the children ...

  9. [转] React Native Navigator — Navigating Like A Pro in React Native

    There is a lot you can do with the React Native Navigator. Here, I will try to go over a few example ...

随机推荐

  1. Codeforces Round #324 (Div. 2) D

    D. Dima and Lisa time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  2. linux启动流程梳理【转】

    接触linux系统运维已经好几年了,常常被问到linux系统启动流程问题,刚好今天有空来梳理下这个过程:一般来说,所有的操作系统的启动流程基本就是: 总的来说,linux系统启动流程可以简单总结为以下 ...

  3. [ CodeVS冲杯之路 ] P1220

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1220/ 一个标准的DAG上的DP,设 f[i][j] 为在第 i 行第 j 最大分数 因为这个状态是无后效性的,所以可 ...

  4. 小Z爱划水(NOIP信(sang)心(bin)赛)From FallDream

    题目: 小Z在机房.他和其它机房同学都面临一个艰难的抉择,那就是 要不要划水? 每个人都有自己的一个意见,有的人想做题,有的人想划水. 当然,每个人只能选择一个事情做.如果一个人做的事情和他想做的不同 ...

  5. popen的用法及与system调用的区别

    首先用man查看下popen的介绍: popen(3) - Linux man page Name popen, pclose - pipe stream to or from a process S ...

  6. 通过过滤器和增强request对象解决get提交请求服务器端乱码。

    1.表单用get方式提交 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  7. Unity防破解 —— 加密Dll与Key保护

        在阅读这篇文章之前,我在处理mono加密问题时,也是参考了雨凇的文章,所以建议先看一下雨凇写的关于加密Dll的文章: 1.Unity3D研究院之Android加密DLL与破解DLL .SO 2 ...

  8. Moving Average from Data Stream -- LeetCode

    Given a stream of integers and a window size, calculate the moving average of all integers in the sl ...

  9. POJ2955 Brackets(区间DP)

    给一个括号序列,求有几个括号是匹配的. dp[i][j]表示序列[i,j]的匹配数 dp[i][j]=dp[i+1][j-1]+2(括号i和括号j匹配) dp[i][j]=max(dp[i][k]+d ...

  10. 【bzoj3261】【最大异或和】可持久化trie树+贪心

    [pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=61705397 Description 给定一个非 ...