Import source: web/src/hooks/useSpringNumber
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useMotionValueEvent, useSpring } from "motion/react";
|
||||
import { useUI } from "../lib/ui";
|
||||
|
||||
/**
|
||||
* A number that physically settles into place instead of snapping.
|
||||
* Returns the live value to render; respects reduced motion.
|
||||
*/
|
||||
export function useSpringNumber(target: number, stiffness = 60, damping = 18): number {
|
||||
const { reduced } = useUI();
|
||||
const spring = useSpring(target, { stiffness, damping });
|
||||
const [value, setValue] = useState(target);
|
||||
|
||||
useEffect(() => {
|
||||
if (reduced) {
|
||||
spring.jump(target);
|
||||
} else {
|
||||
spring.set(target);
|
||||
}
|
||||
}, [target, reduced, spring]);
|
||||
|
||||
useMotionValueEvent(spring, "change", (v) => setValue(v));
|
||||
|
||||
return reduced ? target : value;
|
||||
}
|
||||
Reference in New Issue
Block a user