useRef Hookの主な利用方法はDOMの参照

useRef Hookを使用して、DOM要素への参照を保持することができます。これにより、特定のDOM要素に対して直接操作を行うことができます。

Intersection Observer の例

Intersection Observer APIは、特定の要素がビューポート内に表示されたかどうかを監視するために使用されます。これにより、ページのスクロールやリサイズに応じて、要素の表示状態を効率的に追跡できます。

例：スクロールすると、activeクラスが追加されます。

サンプルコード 01

export default function UseRef() {

  const refs = useRef<(HTMLSpanElement | null)[]>([]);

  useEffect(() => {

    // IntersectionObserverを作成
    // オブザーバーは、オブジェクトの交差を監視するために使用されます。
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add(styles.active);
          } else {
            entry.target.classList.remove(styles.active);
          }
        });
      },
      { threshold: 0.3 }
    );

    // 各refをオブザーバーに登録
    refs.current.forEach((el) => {
      if (el) observer.observe(el);
    });

    // オブザーバーをクリーンアップ
    return () => {
      refs.current.forEach((el) => {
        if (el) observer.unobserve(el);
      });
    };
  }, []);

  return (
    <div>
    <p>
        <span ref={(el) => { refs.current[0] = el; }} className={styles.strong}>
          この要素が表示されると active クラスが追加されます
        </span>
      </p>
      <p>
        <span ref={(el) => { refs.current[1] = el; }} className={styles.strong}>
          この要素が表示されると active クラスが追加されます
        </span>
      </p>
    </div>
  );
}

スクロールしてください

この要素が表示されると active クラスが追加されます

スクロールしてください

この要素が表示されると active クラスが追加されます