Reactで特定の要素の高さを取得するためのカスタムフックを作った : useContainerHeight

                    
TypeScript
                    
useContainerHeight.tsx
                  
import { useState, useEffect, RefObject } from "react";

// 第2引数のオプションの型
type UseContainerHeightOptionProps = {
  // 任意の依存関係
  dependencies?: any[];
  // リサイズ時に高さの再計算を無効にする: trueで無効
  disableResizeCalculation?: boolean;
};

export const useContainerHeight = <T extends HTMLElement>(
  ref: RefObject<T>,
  { dependencies, disableResizeCalculation }: UseContainerHeightOptionProps = {}
): number => {
  // 要素の高さを保持するstate
  const [containerHeight, setContainerHeight] = useState(0);

  // 要素の高さを取得する
  const getHeight = () => {
    if (!ref.current) return;
    const targetContainer = ref.current;

    // 要素のコピーを作成し、親要素に追加する
    const ghostContainer = targetContainer.cloneNode(true) as T;
    targetContainer.parentNode?.appendChild(ghostContainer);

    // コピーのスタイルを設定して、高さを取得する
    ghostContainer.style.cssText =
      "display:block; height:auto; visibility:hidden;";
    const height = ghostContainer.offsetHeight;

    // コピーを削除する
    targetContainer.parentNode?.removeChild(ghostContainer);

    // 要素の高さをstateに設定する
    setContainerHeight(height);
  };

  // コンポーネントのマウント時とdisableResizeCalculation変更時にイベントリスナーを登録&削除する
  useEffect(() => {
    if (disableResizeCalculation) return;
    // リサイズ時に要素の高さを再計算する
    window.addEventListener("resize", getHeight);
    return () => {
      window.removeEventListener("resize", getHeight);
    };
  }, [ref, disableResizeCalculation]);

  // コンポーネントのマウント時と任意の依存関係が変化したときにも要素の高さを計算する
  useEffect(
    () => {
      getHeight();
    },
    dependencies ? dependencies : []
  );

  return containerHeight;
};

                    
TypeScript
                    
index.tsx
                  
import { useRef } from "react";
import { useContainerHeight } from "path/to/useContainerHeight";

const Home = () => {
  // 高さを取得したい要素
  const ref = useRef<HTMLDivElement>(null);

  // カスタムフックで高さを取得
  const containerHeight = useContainerHeight(ref);

  return (
    <div>
      <div ref={ref}>
        高さを取得したい要素
      </div>
      <p>高さ:{containerHeight}</p>
    </div>
  );
};

export default Home;

                    
TypeScript
                    
tsx
                  
import { useRef } from "react";
import { useContainerHeight } from "path/to/useContainerHeight";

                    
TypeScript
                    
                  
const Home = () => {

  // 高さを取得したい要素
  const ref = useRef<HTMLDivElement>(null);

  return (
    <div>
      <div ref={ref}>
        高さを取得したい要素
      </div>
    </div>
  );
};

export default Home;

                    
TypeScript
                    
                  
const containerHeight = useContainerHeight(ref);

                    
TypeScript
                    
                  
const containerHeight = useContainerHeight<HTMLAnchorElement>(ref, {
  dependencies: [hoge, fuga], //任意の依存関係
  disableResizeCalculation: true //リサイズに再計算しない
});