【React Hooks】画面サイズを動的に取得するHooksの作成メモ

簡単なHooksのメモ用。
リサイズに合わせて画面サイズを取得するHook。
Custom Hooksは何かとメモしておくと便利なのでメモメモ。

useWindowDimensions Custom Hook.

import { useState, useEffect } from "react";

export const useWindowDimensions = () => {
  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 windowDimensions;
};

使用例

const { width, height } = useWindowDimensions();