React Number Easing
React component for fancy number transitions.
Installation
npm install react-number-easing --save
Usage.
import NumberEasing from 'react-number-easing';
<NumberEasing
value={15}
speed={300}
decimals={0}
ease='quintInOut' />
Props
value
: The value that you want to display at the end of the animation. This is the target value.[speed]
: How fast do you want to finish the animation? Defaults to 500ms.[ease]
: The easing equation for the animation. Defaults toquintInOut
. You can choose from mattdesl/eases.[decimals]
: Number of decimal numbers to show.[customFunctionRender]
: Function that replaces the defaultNumber(value).toString(decimals)
render function. It takes one argumentcurrentRenderValue
which is aFloat
with the current eased value to render and should return astring
.