1.0.7 • Published 5 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 --saveUsage
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'))