useWheel.ts

useWheel.ts

import { useState, useLayoutEffect } from 'react';

interface UseWheelType {
  deltaX: number;
  deltaY: number;
}
const useWheel = (ref: React.RefObject<HTMLDivElement>): UseWheelType => {
  const [deltaX, setDeltaX] = useState<number>(0);
  const [deltaY, setDeltaY] = useState<number>(0);

  useLayoutEffect(() => {
    const { current } = ref;
    const handler = (event: WheelEvent): void => {
      setDeltaX(event.deltaX);
      setDeltaY(event.deltaY);
    };
    if (current) current.addEventListener('wheel', handler);
    return (): void => {
      if (current) current.removeEventListener('wheel', handler);
    };
  }, [ref]);

  return {
    deltaX,
    deltaY,
  };
};

export default useWheel;