React-transition-value NPM

⚡️ Getting started

  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 |