Guide
Reference
Roadmap
Guide
Reference
Roadmap

useSpringValue

Tags:
Animation
Pausable

A React Hook that returns a spring value.

Spring Value: A dynamic value that simulate a spring physics changed with time.

Demo

Source
Spring Value:
0
⚛️ React Hooks

Usage

See API for more details.

Source

Click links below to view source on GitHub.

🪝 Hook🎨 Demo📄 Document

API

const spring = useSpringValue(start, end, options)

Start

number, The start value of the spring.

End

number, The end value of the spring.

Options

export type UseSpringValueConfig = {
  /**
   * The stiffness of the spring.
   */
  stiffness?: number
  /**
   * The damping of the spring.
   */
  damping?: number
  /**
   * The mass of the spring.
   */
  mass?: number
  /**
   * The precision of the spring.
   */
  immediate?: boolean
  /**
   * The precision of the spring.
   */
  precision?: number
}

Returns

export type Pausable<PauseArgs extends unknown[] = [], ResumeArgs extends unknown[] = []> = {
  isActive(): boolean
  pause: (...args: PauseArgs) => void
  resume: (...args: ResumeArgs) => void
}

export type UseSpringValueReturns = Pausable & {
  /**
   * The current value of the spring.
   */
  value: number
  /**
   * Restart the spring.
   */
  restart(): void
}