Function useScrollFade

packages/shared/src/hooks/useScrollFade.ts:46–84

()

};

export const useScrollFade = <El extends HTMLElement = HTMLDivElement>() => {
  const cleanupRef = useRef<(() => void) | undefined>(undefined);
  const frameRef = useRef<number | undefined>(undefined);

  const setElementRef = useCallback((element: El | null) => {
    cleanupRef.current?.();
    cleanupRef.current = undefined;

    if (!element) {
      return;
    }

    const scheduleUpdate = () => {
      if (frameRef.current !== undefined) {
        cancelAnimationFrame(frameRef.current);
      }
      frameRef.current = requestAnimationFrame(() => updateScrollFade(element));
    };

    const resizeObserver = new ResizeObserver(scheduleUpdate);
    resizeObserver.observe(element);
    element.addEventListener('scroll', scheduleUpdate, { passive: true });

    updateScrollFade(element);

    cleanupRef.current = () => {
      element.removeEventListener('scroll', scheduleUpdate);
      resizeObserver.disconnect();
      if (frameRef.current !== undefined) {
        cancelAnimationFrame(frameRef.current);
        frameRef.current = undefined;
      }
    };
  }, []);

  useEffect(() => () => cleanupRef.current?.(), []);

  return setElementRef;
};