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