useTween

behaves similarly to useState but instead will interpolate the value smoothly with the ability to cancel

Demo

Duration:

Next Value:

Usage

const [duration, setDuration] = useState(500)
const [currentValue, setCurrentValue] = useTween(0)
const [nextValue, setNextValue] = useState(0)
const [hasFinished, setHasFinished] = useState(false)
const onUpdateValue = async () => {
  setHasFinished(false)
  await setCurrentValue(nextValue, {
    duration,
  })
  setHasFinished(true)
}

const onCancel = () => {
  setCurrentValue(nextValue, {
    duration: 0,
  })
  setHasFinished(true)
}

Type Declaration

const [const currentValue: numbercurrentValue, const setCurrentValue: (value: Kaioken.StateSetter<T>, options?: TweenedOptions<number> | undefined) => Promise<void>setCurrentValue] = useTween<number>(initial: number | (() => number), defaults?: TweenedOptions<number> | undefined): [number, (value: Kaioken.StateSetter<T>, options?: TweenedOptions<number> | undefined) => Promise<void>]useTween(0)

interface interface TweenedOptions<T>TweenedOptions<function (type parameter) T in TweenedOptions<T>T> {
  TweenedOptions<T>.delay?: number | undefineddelay?: number
  TweenedOptions<T>.duration?: number | ((from: T, to: T) => number) | undefinedduration?: number | ((from: Tfrom: function (type parameter) T in TweenedOptions<T>T, to: Tto: function (type parameter) T in TweenedOptions<T>T) => number)
  TweenedOptions<T>.easing?: ((t: number) => number) | undefinedeasing?: (t: numbert: number) => number
  TweenedOptions<T>.interpolate?: ((a: T, b: T) => (t: number) => T) | undefinedinterpolate?: (a: Ta: function (type parameter) T in TweenedOptions<T>T, b: Tb: function (type parameter) T in TweenedOptions<T>T) => (t: numbert: number) => function (type parameter) T in TweenedOptions<T>T
}