@crossfox/react-animated-number

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:

View demo here

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