useWillChange Hook
A React hook to manage will-change CSS property lifecycle. Applies will-change before animation starts and removes it after completion for optimal performance.
Installation
$ npx shadcn@latest add @orecus/use-will-changeA React hook to manage will-change CSS property lifecycle. Applies will-change before animation starts and removes it after completion for optimal performance.
$ npx shadcn@latest add @orecus/use-will-changeimport { useWillChange } from "@/components/ui/orecus.io/lib/use-will-change";const [isAnimating, setIsAnimating] = useState(false);const elementRef = useRef<HTMLDivElement>(null);useWillChange(elementRef, 'transform', isAnimating);return <div ref={elementRef}>Content</div>;