useElementOnScreen hook

useElementOnScreen.tsx

import { useEffect, useRef, useState } from 'react';
import * as React from 'react';

export type UseElementOnScreenProps = [React.MutableRefObject<any>, boolean];

export const useElementOnScreen = (options?: IntersectionObserverInit): UseElementOnScreenProps => {
  const containerRef = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  const callbackFunction = (entries) => {
    const [entry] = entries;
    setIsVisible(entry.isIntersecting);
  };

  useEffect(() => {
    const observer = new IntersectionObserver(callbackFunction, options);
    if (containerRef.current) observer.observe(containerRef.current);

    return () => {
      // eslint-disable-next-line react-hooks/exhaustive-deps
      if (containerRef.current) observer.unobserve(containerRef.current);
    };
  }, [containerRef, options]);

  return [containerRef, isVisible];
};

export type WithElementOnScreenProps = {
  elementOnScreenRef: React.MutableRefObject<any>;
  isElementOnScreen: boolean;
};

export function withElementOnScreen(WrappedComponent, options?: IntersectionObserverInit) {
  return (props) => {
    const [containerRef, isVisible] = useElementOnScreen(options);
    return (
      <WrappedComponent
        elementOnScreenRef={containerRef}
        isElementOnScreen={isVisible}
        {...props}
      />
    );
  };
}