useTween

About

useTween is a compact, auto-starting progress animation. It is useful when a component only needs a value moving from 0 to 1; choose useEasing when controls or looping are required.

Examples

import { useTween } from "rooks";

export default function TweenedProgress() {
  const progress = useTween(800, (value) => value * value);
  return (
    <progress max={1} value={progress}>
      Progress: {progress}
    </progress>
  );
}

Parameters

Argument	Type	Default	Meaning
`duration`	`number`	`200`	Duration in milliseconds; use a positive value.
`easing`	`(progress: number) => number`	linear	Maps clamped raw progress.

The easing function type is not exported from this module. Common easing presets exist internally, but only useTween is exported from the package root; use the public Easing value documented by useEasing when you want presets.

Return value

A number initialized to 0. Raw progress is clamped at 1, but a custom easing output is not clamped.

Behavior and lifecycle

The first frame establishes the clock. Changing duration or easing identity resets the clock; the old value remains for the current render, then the next frame begins again at the easing function's value for progress 0. The hook reaches final progress but its underlying frame loop stays active until unmount because callback return values do not stop useRaf.

Compatibility and accessibility

Server output is 0, and the animation begins after client effects run. Honor reduced-motion preferences and provide a static or immediate equivalent. Native progress semantics or visible text should communicate completion independently of motion.