Skip to content

dev-bjoern/react-transition-value

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

react-transition-value

Transition / Animate number values using easing functions

npm bundle size

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