React useAutoScrollToBottom.ts

useAutoScrollToBottom.ts

import React from 'react';

export default function useAutoScrollToBottom(deps) {
  const paused = React.useRef(false);
  const element = React.useRef<HTMLDivElement | null>(null);

  const onWheel = React.useCallback(() => {
    const { scrollTop, scrollHeight, offsetHeight } = element.current || {
      scrollTop: 0,
      scrollHeight: 0,
      offsetHeight: 0,
    };
    paused.current = scrollHeight - (scrollTop + offsetHeight) > 4;
  }, []);

  const ref = React.useCallback(
    (el) => {
      if (el) {
        element.current = el;
        el.addEventListener('wheel', onWheel, { passive: true });
      } else if (element.current !== null) {
        element.current.removeEventListener('wheel', onWheel);
        element.current = null;
      }
    },
    [onWheel]
  );

  React.useLayoutEffect(() => {
    if (element.current && !paused.current) {
      element.current.scrollTop = element.current.scrollHeight;
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);

  return { ref };
}