React animated number by CrossFox
A lightweight, blazing-fast React component that's easy to use and works with React 16.8 and higher.
- 📦 <1kb mini library
- 🌟 Easy to use
- ⚡ High performance
- 🔗 No dependency
Demo:
Install
npm install @crossfox/react-animated-number
yarn add @crossfox/react-animated-number
Author
- Oleksii Fursov @nodePro777
Props
| Name | Type | Default Value | Description | Version |
|---|---|---|---|---|
value | number | 0 | Current value, triggers animation on change | 1.00 |
round | number | 0 | Number of decimal places | 1.00 |
duration | number | 1000 | Animation duration(ms) | 1.00 |
className | string | 0 | You can add custom classes | 1.00 |
showArrow | boolean | false | Display an arrow to the left of the number indicating growth or decline | 1.00 |
reserveMinusSpace | boolean | false | Adds a space for the minus sign | 1.00 |
reserve | number | 0 | Reserves space for the number | 1.00 |
align | string | "left" | Reservation direction. Available only as 'left', in other cases 'right' | 1.00 |
prefix | string | "" | Adds text to be placed before the number. For example, '$100' | 1.00 |
suffix | string | "" | Adds text to be placed after the number. For example, '1000 UAH' | 1.00 |
rate | string | 60 | Number of updates per second | 1.00 |
tagName | string | div | Tag to be created for the number. | 1.00 |
onFinish | function | function( oldValue, value, $el ) | Event triggers after the animation is complete. Returns the old number, current number, and the element node. | 1.00 |
ClassName status
| ClassName | Description |
|---|---|
is-progress | Added during the animation |
is-increment | Notifies that the number has increased |
is-decrement | Notifies that the number has decreased |
Example
import React, { useState } from 'react';
import AnimatedNumber from '@crossfox/react-animated-number';
const App = () => {
const [value, setValue] = useState(0)
const onClickRandom = () => setValue(Math.random() * 10000 >> 0)
return (<>
<button onClick={onClickRandom}>Random value</button>
<AnimatedNumber value={value}/>
</>)
}