React Number Easing

React component for fancy number transitions.

Live demo

![react-number-easing screenshot](https://che-wf.github.io/react-number-easing/)

Installation

js

npm i -S che-react-number-easing





Usage.

jsx

const NumberEasing = require('che-react-number-easing');



  ease="quintInOut"

  precision={2}

  speed={300}

  trail={true}

  useLocaleString={true}

  value={15}

/>





$3



*

[ease]

: The easing equation for the animation.

  * Default:

quintInOut

 (You can choose from mattdesl/eases.)

  * Type:

string

[precision]

: How many decimal places you want to show?

  * Default:



  * Type:

number

[speed]

: How fast do you want to finish the animation?

  * Default:

500

 (ms)

  * Type:

number

[trail]

: Do you want trailing zeroes?

  * Default:

false



  * Type:

boolean

[useLocaleString]

: Use number formatting based on locale?

  * Default:

false



  * Type:

boolean

[value]

: The value that you want to display at the end of the animation.

  *

Required



  * Type:

number





Build



If you want to build this from source, you will need babel and less.

js

npm install





And run the pre publish script

js

npm run prepare

React Number Easing

React component for fancy number transitions.

Live demo

![react-number-easing screenshot](https://che-wf.github.io/react-number-easing/)

Installation

js

npm i -S che-react-number-easing





Usage.

jsx

const NumberEasing = require('che-react-number-easing');



  ease="quintInOut"

  precision={2}

  speed={300}

  trail={true}

  useLocaleString={true}

  value={15}

/>





$3



*

[ease]

: The easing equation for the animation.

  * Default:

quintInOut

 (You can choose from mattdesl/eases.)

  * Type:

string

[precision]

: How many decimal places you want to show?

  * Default:



  * Type:

number

[speed]

: How fast do you want to finish the animation?

  * Default:

500

 (ms)

  * Type:

number

[trail]

: Do you want trailing zeroes?

  * Default:

false



  * Type:

boolean

[useLocaleString]

: Use number formatting based on locale?

  * Default:

false



  * Type:

boolean

[value]

: The value that you want to display at the end of the animation.

  *

Required



  * Type:

number





Build



If you want to build this from source, you will need babel and less.

js

npm install





And run the pre publish script

js

npm run prepare