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.
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,
})
}
const [const currentValue: number
currentValue, 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?: any
hard?: any
SpringUpdateOpts.soft?: string | number | boolean | undefined
soft?: string | number | boolean
}
interface SpringOpts extends SpringUpdateOpts {
SpringOpts.stiffness: number
stiffness: number
SpringOpts.damping: number
damping: number
SpringOpts.precision: number
precision: number
}