@crossfox/react-animated-number NPM

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}/>
	</>)
}