useIntersectionObserver.tsx

import * as React from "react";
interface entryDef {
  isIntersecting: Boolean;
  intersectionRatio: number;
}

interface IntersectionObserverDef {
  ancestorElem?: Element,
}

export const useIntersectionObserver = (props: IntersectionObserverDef) => {
  const [converge, setConverge] = React.useState(false);
  
  React.useEffect(() => {}, [converge]);
  
  function executeJob(entry: Array<entryDef>){
    entries.forEach((entry) => {
      if(entry.isIntersecting){
        setConverge(true);
      }
    })
  }
  
  function createScrollObserver() {
    const options = {
      threshold: 1,
      root: props.ancestorElem ?? null;
      rootMargin: "0px"
    }
    
    return new IntersectionObserver(executeJob, options);

  }
    
  return {
    createScrollObserver,
    converge,
    setConverge,
  }
}