@crossfox/react-animated-number
v1.0.18
Published
A lightweight JavaScript component designed for creating smooth and visually appealing animated transitions between different states or values, enhancing user experience in web applications.
Downloads
834
Maintainers
Readme
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}/>
</>)
}