react-transition-value
Transition / Animate number values using easing functions
⚡️
Getting started
npm i react-transition-value
import { useTransitionValue } from 'react-transition-value'
const AnimateValue = () => {
// transitionValue will automatically transition through all values from 0 to 1000
const [transitionValue, setTransitionValue] = useTransitionValue(0)
return <button onClick={() => setTransitionValue(1000)}>
{transitionValue}
</button>
}
Api
const [transitionValue, setTransitionValue] = useTransitionValue(from, options)
options
options are not required
| Property | Type | Default Value | Description |
|---|---|---|---|
| to | number | 100 | Target value to transition to |
| from | number | 0 | Initial value to transition from |
| duration | number | 200 | Transition duration in milliseconds |
| autoStart | boolean | false | Automatically start the transition |
| easing | function | easeOutExpo | Easing function used for the transition |
| onDone | function | ({from, to}) => {} | Called once transition finished |
| onStep | function | ({from, to, value}) => {} | Called on each transition step |
setTransitionValue
allows override of options
setTransitionValue(to, options)
24 Dec 28, 2022
82 Dec 7, 2022
914 Nov 10, 2022
2 Jul 3, 2022
12 Aug 25, 2022
8 Nov 27, 2022
37 Dec 31, 2022
3.7k Jan 2, 2023
23 Oct 27, 2022
172 Dec 29, 2022