CrossFox 的回放动画数字
一个轻而易举的快活反应组件,易于使用,并与16.8和更高等反应相配合.
- <1kb小型图书馆
- 方便使用
- * 业绩好
- 无依赖性
发音:
安装
npm install @crossfox/react-animated-number
yarn add @crossfox/react-animated-number
作者
- 奥列克西·富尔索夫 @nodePro777 请检查url=值 (帮助)
道具
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
value | number | 0 | 当前值, 变化时触发动画 | 1.00 (中文(简体) ) |
round | number | 0 | 小数位数 | 1.00 (中文(简体) ) |
duration | number | 1000 | 动画持续时间(分) | 1.00 (中文(简体) ) |
className | string | 0 | 您可以添加自定义类 | 1.00 (中文(简体) ) |
showArrow | boolean | false | 显示显示增长或下降的数字左边的箭头 | 1.00 (中文(简体) ) |
reserveMinusSpace | boolean | false | 添加减号的空格 | 1.00 (中文(简体) ) |
reserve | number | 0 | 为数字预留空间 | 1.00 (中文(简体) ) |
align | string | "left" | 预定方向。 仅作为"左"使用,其他情况下为"右" | 1.00 (中文(简体) ) |
prefix | string | "" | 添加要放在数字前面的文本。 例如,"100美元" | 1.00 (中文(简体) ) |
suffix | string | "" | 添加要放在数字后的案文。 例如"1000 UAH" | 1.00 (中文(简体) ) |
rate | string | 60 | 每秒更新次数 | 1.00 (中文(简体) ) |
tagName | string | div | 要为数字创建标记 . | 1.00 (中文(简体) ) |
onFinish | function | 函数( e) 旧的瓦卢, 数值, 尔 (中文(简体) ) | 动画完成后事件触发. 返回旧数字、当前数字和元素节点. | 1.00 (中文(简体) ) |
类名状态
| 类Name | 说明 |
|---|---|
is-progress | 在动画中添加 |
is-increment | 通知人数增加 |
is-decrement | 通知人数已减少 |
示例
import React, { useState } from 'react';
import AnimatedNumber from '@crossfox/react-animated-number';
const App = () => {
const [value, setValue] = useState(0)
const onClickRandom = () => setValue(Math.random() * 10000 >> 0)
return (<>
<button onClick={onClickRandom}>Random value</button>
<AnimatedNumber value={value}/>
</>)
}