useSpring

The useSpring hook behaves similarly like useTween which interpolates values smoothly however now the controls using physics-based calculations, creating natural, fluid animations within your application.

Demo

Usage

const nextValue = useRef(100)
const [currentValue, setCurrentValue] = useSpring(100)

const onUpdateValue = async () => {
  nextValue.current = nextValue.current === 100 ? 350 : 100

  await setCurrentValue(nextValue.current, {
    damping: 0.8,
    stiffness: 0.15,
    precision: 0.01,
  })
}

const onCancel = async () => {
  await setCurrentValue(nextValue.current, {
    hard: true,
  })
}

Type Declaration

const [const currentValue: numbercurrentValue, const setCurrentValue: (value: Kaioken.StateSetter<T>, opts?: Partial<SpringOpts>) => Promise<void>setCurrentValue] = useSpring<number>(initial: number | (() => number), opts?: Partial<SpringOpts>): [number, (value: Kaioken.StateSetter<T>, opts?: Partial<SpringOpts>) => Promise<void>]useSpring(0)

interface SpringUpdateOpts {
  SpringUpdateOpts.hard?: anyhard?: any
  SpringUpdateOpts.soft?: string | number | boolean | undefinedsoft?: string | number | boolean
}

interface SpringOpts extends SpringUpdateOpts {
  SpringOpts.stiffness: numberstiffness: number
  SpringOpts.damping: numberdamping: number
  SpringOpts.precision: numberprecision: number
}