dev-bjoern / react-transition-value

🚀 Transition number values using easing functions

react-transition-value

Transition / Animate number values using easing functions

Try Demos →

⚡️ 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)