DE
dev-bjoern/react-transition-value
🚀 Transition number values using easing functions
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)