管理画面などでウィンドウサイズによってサイドバーの開閉を調節したいときにReactのHooksで動的にwindowサイズを取得を取得できたら便利です。
今回はReactのHooksで動的に画面サイズを取得し処理を実行する方法をご紹介します。
Hooksの実装
Hooksの実装方法については以下の記事を参考にというより使わせていただきました。
https://zenn.dev/kenghaya/articles/6020b6192dadec
import React, { useLayoutEffect, useState } from "react";
const useWindowSize = (): number[] => {
const [size, setSize] = useState([0, 0]);
useLayoutEffect(() => {
const updateSize = (): void => {
setSize([window.innerWidth, window.innerHeight]);
};
window.addEventListener("resize", updateSize);
updateSize();
return () => window.removeEventListener("resize", updateSize);
}, []);
return size;
};
export default useWindowSize;Hooksを呼び出す
実際にHooksを呼び出してWindow幅と高さを表示させます。
シンプルに幅と高さを表示させるだけであれば以下のように書くだけで十分です。
import useWindowSize from "@/hooks/useWindowSize";
const Dashboard: React.FC = () => {
const [width, height] = useWindowSize();
return (
<>
<div>
height:{height} width:{width}
</div>
</>
);
};
export default Dashboard;
画面サイズによって処理を変える
レスポンシブに表示・非表示を制御する際は真偽値によって判定することが多いかと思います。
ウィンドウサイズによって処理を変えたい時は以下のようにuseEffectを活用するとtrue/falseを変えることができます。
以下の処理ではウィンドウサイズが768px以上だと真偽値がtrueになります。
import { useEffect, useState } from "react";
import useWindowSize from "@/hooks/useWindowSize";
const Dashboard: React.FC = () => {
const [width, height] = useWindowSize();
const [open, setOpen] = useState(true);
useEffect(() => {
if (width === 0) {
return setOpen(true);
}
if (width < 768) {
return setOpen(false);
}
return setOpen(true);
}, [width]); //widthに変更があるたびに処理を実行する
return (
<>
<div>
height:{height} width:{width}
</div>
//JSXはtrue/falseを表示できないので今回はあえてStringに変換している
<div>open:{open + ""}</div>
</>
);
};
export default Dashboard;
関連記事
