English

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:

⚛️ 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
}

ON THIS PAGE

#useSpringValue

#Demo

#Usage

#Source

#API

#Start

#End

#Options

#Returns

useSpringValue

Demo

Usage

Source

API

Start

End

Options

Returns