複数要素に対応したIntersection Observerのカスタムフック実装

はじめに 複数の要素に対してIntersection Observerで同じ挙動をさせるのにカスタムフックがあると便利だなと思ったので実装してみました。もちろん、単体の要素にも使えます。React + TypeScriptで実装してます。 Intersection Observer とは ページをスクロールして要素がビューポート内に表示されたタイミングで要素をふわっと表示させるアニメーションをさせたい場合などに使います。 交差オブザーバー API (Intersection Observer API) は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供します。 カスタムフックの実装 import { RefObject, useEffect } from 'react' /** * @param refs Intersectio