# number-rock-react

> A component that lets numbers animated, for react

Latest version **1.0.7** (published 2021-03-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install number-rock-react
pnpm add number-rock-react
yarn add number-rock-react
bun add number-rock-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2021-03-18 |
| First published | 2021-03-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | chenliangliang |
| Maintainers | wengochen |

## Links

- npm: https://www.npmjs.com/package/number-rock-react
- npm.io page: https://npm.io/package/number-rock-react

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Recent versions

- 1.0.7 (latest) — 2021-03-18
- 1.0.6 — 2021-03-18
- 1.0.5 — 2021-03-18
- 1.0.4 — 2021-03-18
- 1.0.3 — 2021-03-18
- 1.0.2 — 2021-03-18
- 1.0.1 — 2021-03-18
- 1.0.0 — 2021-03-18

## README

## 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'))
```

---
_Source: https://npm.io/package/number-rock-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._