1.0.7 • Published 4 years ago
number-rock-react v1.0.7
About number-rock-react
A component that lets numbers animated, for react
Install
npm install number-rock-react --save
Usage
import NumberRock from 'number-rock-react';
<NumberRock
start={888}
end={1234}
precision={2}
duration={2000}
>
</NumberRock>
Props
property 参数 | description 描述 | require 是否必须 | type 类型 | fn accept property 函数接收的参数 |
---|---|---|---|---|
start | start number 开始值 | TRUE | number | |
end | end number 结束值 | TRUE | number | |
precision | precision number精度 | FALSE | number | |
duration | duration time 持续时间 | FALSE | number | |
formate | function, must return a val 格式化方法 ,接收一个参数,必须返回一个处理后的值 | FALSE | function | number |
onProgress | callback in progress 翻滚进行中触发的方法 | FALSE | function | frameVal, progress |
onEnd | callback at the end 翻滚结束后的回调 | FALSE | function | end |
className | name of the component class 类名 | FALSE | string | |
processingClassName | name of the processing class 翻滚进行中的类名 | FALSE | string | |
style | style 样式 | FALSE | object | |
processingStyle | style in progress 翻滚进行中的样式 | FALSE | object |
Example
import React,{ Component } from 'react';
import ReactDOM from 'react-dom';
import NumberRock from 'number-rock-react';
const formate = v => '$' + v;
class App extends Component {
render() {
return (
<NumberRock
start={888}
end={1234}
precision={2}
duration={2000}
formate={formate}
>
</NumberRock>
);
}
}
ReactDOM.render(<App/>,document.getElementById('root'))