Demo available here!
Usage
This package was built using React-Pose, react-dom-confetti and Lottie-web.
Why should I use that? Read my blog post and you will know – https://www.thedevelobear.com/post/microinteractions/
Install from npm by typing npm install react-rewards or yarn add react-rewards while in your package.json directory.
This package lets you add microinteractions to your app, and rewards users with the rain of confettis, flying emoji or memphis design particles in seconds. In order to make it rain, you need to wrap your button of choice with the <Reward> component, fire the rewardMe() method from the refs and voilà. You can also "punish" the user by calling the punishMe() method and showing them that something went wrong.
import Reward from 'react-rewards';
// in render
<Reward
ref={(ref) => { this.reward = ref }}
type='emoji'
>
<button onClick={this.fetchSomeData} />
</Reward>
// in fetchSomeData:
// to reward a user with confetti/emoji/memphis rain:
this.reward.rewardMe();
// to "punish" user :
this.reward.punishMe();
Props & config
Basic props:
| name | type | description | required | default |
|---|---|---|---|---|
| ref | func | function that creates a ref of the reward component | yes | |
| type | string | 'confetti', 'emoji' or 'memphis' | no | 'confetti' |
| config | object | a configuration object described below | no | see below |
Config object:
| name | type | description | default (confetti / emoji) |
|---|---|---|---|
| lifetime | number | time of life of each particle in ms | 200 / 200 |
| angle | number | initial direction of particles in degrees | 90 / 90 |
| decay | number | how much the velocity decreases with each frame | 0.91 / 0.91 |
| spread | number | spread of particles in degrees | 45 / 100 |
| startVelocity | number | initial velocity of particles | 35 / 20 |
| elementCount | number | particles quantity | 40 / 15 |
| elementSize | number | particle size in px | 8 / 20 |
| zIndex | number | z-index of particles | 10 / 10 |
| springAnimation | bool | whether the button should be animated | true |
| colors | array | An array of colors used when generating confettis | |
| emoji | array | An array of emoji used when generating emoji particles |
-
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 qu
-
问题内容： 我注意到可以这样导入： …或像这样： 第一个导入模块中的所有内容（请参阅：导入整个模块的内容） 第二个仅导入模块导出（请参阅：导入默认值） 似乎这两种方法是不同的，并且根本上是不兼容的。 为什么它们都起作用？ 请参考源代码并解释该机制…我有兴趣了解其工作原理。 ES6常规模块信息回答了该问题。 我在问使模块像这样工作的机制。在这里，它似乎与源代码中的 “ hacky”导出机制有关，但尚
-
这篇快速上手指南会教你如何将TypeScript与React结合起来使用。 在最后，你将学到： 使用TypeScript和React创建工程 使用TSLint进行代码检查 使用Jest和Enzyme进行测试，以及 使用Redux管理状态 我们会使用create-react-app工具快速搭建工程环境。 这里假设你已经在使用Node.js和npm。 并且已经了解了React的基础知识。 我们之所以使
-
我已经改用react Native制作跨平台应用程序（虽然没有制作）。我只是想要一个答案，我的问题，反应和反应之间的区别。我在网上搜索了一下，但没有找到合适的答案。
-
问题内容： 与 哪个更好，为什么？ 还是除了以后编写更少的代码外没有其他区别？ 写作是否意味着只导入Component对象？ 问题答案： 让您代替。它减少了React名称空间的键入和重复，这通常是一种理想的现代编码约定。 此外，Webpack 2和Rollup之类的工具会“摇晃”，这意味着任何未使用的导出都不会捆绑到您的最终代码中。使用/，您可以保证所有React的源代码都将被捆绑。使用，某些工具
-
本文向大家介绍react-native 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
我正在使用“React admin”创建一个管理界面（前端）。我正在使用spring boot作为我的REST API。我的React应用程序的url是：“http://localhost:3000”。我的spring boot API的url是：“http://localhost:8080”。 下面是CORS配置的spring boot代码，它在一个单独的类中，称为CORSCONFIG： 下面是