thallium-frontend/src/utils/hooks.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { useState, useEffect } from "react";
import { type RefObject } from "react";

export function useVisible(ref: RefObject<HTMLElement>) {
  const [isVisible, setVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
        ([entry]) => { setVisible(entry.isIntersecting); }
    );

    if (ref.current)
      observer.observe(ref.current);

    return () => { observer.disconnect(); };
  }, [ref]);

  return isVisible;
}