【React】リアルタイムで画面サイズの変更を検知・値を取得する

タイトルにある通り、React で画面サイズが変わった事をリアルタイムで検知し、かつ画面の幅・高さをその都度取得する方法についてです。

参考にさせていただいた…というか、コードをまるっと使用させていただいたサイトはこちら。

Reactで画面サイズを取得するHooks | RyotArchLog
https://ryotarch.com/javascript/react/get-window-size-with-react-hooks/

まさに、わたしが実装したいと思ったコードそのものでした。

サンプルコードは下記のとおりです。

import React, { useState, useEffect } from 'react';

const Example = props => {
  const getWindowDimensions = () => {
    const { innerWidth: width, innerHeight: height } = window;
    return {
      width,
      height
    };
  } 
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
  useEffect(() => {
    const onResize = () => {
      setWindowDimensions(getWindowDimensions());
    }
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return (
    <div>
      ......
    </div>
  );
}
export default Example;

私はコンポーネント内に実装しました。
上記コードでは、画面サイズが変わるたびに state の windowDimensions にリアルタイムで反映され、幅、高さの値はそれぞれ windowDimensions.width と windowDimensions.height で取得できます。

こちらを使えば、例えば画面の幅が 800px 以下になったら、指定した要素の縦幅を小さくする等の処理を行うことができます。
私の場合は、画面のサイズによって PC 用のステッパーとモバイル用のステッパーを切り替えるという処理を行っています。

以上、React で画面のサイズの変更をリアルタイムで検知し、幅・高さをその都度取得する方法についてでした。
ご参考になれば幸いです。