[React]要素の横幅を取得するcustom hook

指定した要素の横幅のサイズを取得したい場合のカスタムフック。
※ heightにすれば高さも取得が可能

Custom hook

const useElementWidth = (targetElement: RefObject) => {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    const handleResize = () => {
      if (targetElement?.current) {
        const { width } = targetElement.current.getBoundingClientRect()
        setWidth(width)
      }
    }
    window.addEventListener('resize', handleResize)
    handleResize()
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return width
}

window resize イベントのリスナーをセットしたのは、ブラウザのウインドウサイズを変更した時に動的に要素の幅も再計算されるようにするため。

使用する側

const Sample = () => {
  const targetElement = useRef(null);
  const width = useElementWidth(targetElement)

  useEffect(() => {
    console.log(width)
  }, [width])

  return (
    

      xxxxx
    

  )