[React] ResizeObserver APIを使ってリサイズする

とりあえず便利

便利なので是非とも使用してみてください。
使用方法は以下にコードを入れましたのでこのまま使ってもらっても良いですし、独自に実装されても良いかと思います。ご自由にどうぞ。

高さを調節するのに僕は使用しました。

以前まではresizeを使用しておりました。
もうそろそろ、やり方を変えてスマートな方法を採用したいと考えており調査しているとResizeObserverに出会いました。以前から知ってはいたのですがその時はまだ使用できる状況になかったのですが、今は整っている状況でもあったので採用しました。

コード自体のスッキリしているようですし、今度からResizeObserverを採用していこうと思います。

  import React, { useRef } from 'react'

  const useRef = useRef(null) // 変数名はユニークな名前に変えましょー

  useEffect(() => {
      const H = Headerの高さ
      useRef.current.style.height = window.innerHeight - H + 'px' // 念の為初めに付与させる

      const resizeObserver = new ResizeObserver(() => {
        if (useRef.current) {
          useRef.current.style.height = // リサイズされた時に付与し直す
            window.innerHeight - H + 'px'
        }
      })

      useRef.current && resizeObserver.observe(document.body)

      return (): void => {
        resizeObserver.disconnect()
      }
  }, [])

型を利用される場合、以下を実行ください。

% npm install --save-dev @types/resize-observer-browser

よかったら、ぜひ使ってみてください。