useAnimatedNumber Hook

A React hook that animates numeric values from 0 to their target on mount. Parses prefixes/suffixes ($, %, commas) and preserves formatting during animation. Uses motion's animate() with reduced motion support.

Installation

$ npx shadcn@latest add @orecus/use-animated-number

Dependencies:

motion

Registry:

@orecus/use-reduced-motion

Usage

tsx

import { useAnimatedNumber } from "@/components/ui/orecus.io/lib/use-animated-number";// Returns a ref to attach to the display elementconst { ref } = useAnimatedNumber("$48,352", { duration: 0.8 });return <span ref={ref}>$48,352</span>;