useIntersectionObserver.ts

import { onUnmounted, Ref, watch } from '@vue/composition-api';

export type UseIntersectionObserverEntry<E extends HTMLElement> =
  IntersectionObserverEntry & { target: E };

export type UseIntersectionObserverCallback<E extends HTMLElement> = (
  entry: UseIntersectionObserverEntry<E>,
) => void;

export const useIntersectionObserver = <E extends HTMLElement>(
  elementRef: Ref<E | null>,
  callback: UseIntersectionObserverCallback<E>,
  // options?: IntersectionObserverInit,
) => {
  const observer = new IntersectionObserver(([entry]) => {
    if (entry) {
      callback(entry as unknown as UseIntersectionObserverEntry<E>);
    }
  });

  watch(elementRef, (nextElement, prevElement) => {
    if (prevElement) {
      observer.unobserve(prevElement);
    }
    if (nextElement) {
      observer.observe(nextElement);
    }
  });

  onUnmounted(() => {
    observer.disconnect();
  });
};