こんにちは!ソリューションコンサルタントの滝元です。
本記事では、Next.jsで動的に画面サイズを取得するHooksをご紹介します。
レイアウトの調整にはFlexboxやCSS Gridを使用することが多いと思います。 しかし、コンポーネントのレイアウトを実装するときにどうしてもウィンドウサイズから計算しなければならない場合もあります。 そういった場合に使用できるHooksをご紹介させていただきます。
Hooksの実装
GetWindowSize.ts
import { useEffect, useState } from "react"; export const getWindowSize = () => { const [windowSize, setWindowSize] = useState({ width: 0, height: 0, }); useEffect(() => { if (typeof window !== "undefined") { const handleResize = () => { setWindowSize({ width: window.innerWidth, height: window.innerHeight, }); }; window.addEventListener("resize", handleResize); handleResize(); return () => window.removeEventListener("resize", handleResize); } else { return; } }, []); return windowSize; };
Next.js はPre-redndering(SSR,SSG)がサポートされているので、 Hooksでブラウザ側にしか存在しないグローバルオブジェクトのwindowやdocumentを参照する場合には必ず
if (typeof window !== "undefined") {
を実装するようにしましょう。
使い方
index.tsx
import type { NextPage } from "next"; import { getWindowSize } from "../hooks/GetWindowSize"; const Home: NextPage = () => { const { height, width } = getWindowSize(); return ( <div> height:{height} width:{width} </div> ); }; export default Home;
画面上にウィンドウサイズが表示されることが確認できました!
まとめ
Next.jsでウィンドウサイズを取得したいときにはWindow: resize イベントを利用したHooksを実装する! ただし、windowがundefinedの可能性があることに注意!
Ignite UI for React トライアル版を利用するには
Ignite UI for React はトライアル板での試用が可能です。 トライアルのダウンロードはこちら
また、こちらのページ よりアカウントの作成を行っていただくと登録より30日間、弊社のテクニカルサポートをご利用いただくことが出来ますのでお気軽にお問い合わせください。
製品をご購入をご検討のお客様は こちらのページ よりお気軽にお問い合わせください。そのほか、製品デモや、弊社製品そのものに関するご相談だけでなく、システム開発における様々なご相談も実施可能な無料相談会も随時受け付けています。