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. mysql截取字符串与reverse函数

    mysql的函数大全: http://www.jb51.net/Special/606.htm 这个网页上很多知识点,可以学习下,关于mysql的函数,也可以作为API查询: 这里只说下mysql的截 ...

  2. jQuery选择器总结(重要)

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

  3. 小Z爱图论(NOIP信(sang)心(bin)赛)From FallDream

    题目: 小Z最近喜欢上了图论,于是他研究了一下图的连通性问题.但是他遇到了一个难题. 给定一个n个点的有向图,求有多少点对(i,j)满足从i点出发能到达点j ? 小Z仅会简单的朴素算法,所以他想问问你 ...

  4. vs2015部署---下一代VC运行时库系统:the Universal CRT

    前言 其实the Universal CRT(通用C运行时库)已经不能算是“下一代”,因为它已经在前两年伴随着Visual Studio 2015和Windows10发布.但是由于之前使用VS2015 ...

  5. c# 防止重复运行 弹出已运行窗口并传递消息

    最近在写一款软件 软件是用来接收其他程序传递过来的命令行,并形成列表 大概的最终效果就像下图一样 原本为了程序美观是打算用listbox自绘列表,字和图片都绘制好了发现自己不会绘制按钮 所以最终采用了 ...

  6. openstack token

    在openstack的token中,包含如下: 'domain', {'id': None, 'name': None}'expires', datetime.datetime(2017, 8, 9, ...

  7. [BZOJ2815][ZJOI2012]灾难 灭绝树+拓扑排序+lca

    灾难 [问题描述] 阿米巴是小强的好朋友. 阿米巴和小强在草原上捉蚂蚱.小强突然想,如果蚂蚱被他们捉灭绝了,那 么吃蚂蚱的小鸟就会饿死,而捕食小鸟的猛禽也会跟着灭绝,从而引发一系列的 生态灾难. 学过 ...

  8. AC日记——[国家集训队2011]旅游(宋方睿) cogs 1867

    [国家集训队2011]旅游(宋方睿) 思路: 树链剖分,边权转点权: 线段树维护三个东西,sum,max,min: 当一个区间变成相反数时,sum=-sum,max=-min,min=-max: 来, ...

  9. 服务器IIS禁止通过IP访问

    之前发布的网站,只是配置端口信息,IP都选择的是*,所以一直没有考虑IP能访问的事情. 现在有个需求,就是只能通过域名访问,不能通过IP访问,那么做法就是给这个主机名添加上解析的域名,IP自然就失效了

  10. 华农oj Problem K: 负2进制【有技巧构造/待补】

    Problem K: 负2进制 Time Limit: 2 Sec Memory Limit: 128 MB Submit: 51 Solved: 6 [Submit][Status][Web Boa ...