這個應該十分常見,為了想要做RWD或其他原因,我們需要取得目前瀏覽器的長與寬時:
import { useState, useEffect } from "react";
export function useWindowSize() {
const [width, setWidth] = useState<number>(window.innerWidth || 0);
const [height, setHeight] = useState<number>(window.innerHeight || 0);
useEffect(() => {
const handleResize = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return { height, width };
}
但是會有問題,如果是在非瀏覽器環境,例如:SSR,就會因為window未定義的關係跳錯誤,所以我們如果要兼容到nextjs這種SSR的話,就要改成這樣來判斷
import { useState, useEffect } from "react";
export function useWindowSize() {
const isClient = typeof window === "object";
const [width, setWidth] = useState<number>(isClient ? window.innerWidth : 0);
const [height, setHeight] = useState<number>(
isClient ? window.innerHeight : 0
);
useEffect(() => {
if (!isClient) return;
const handleResize = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, [isClient]);
return { height, width };
}
先去判斷有沒有window,沒有window就不會執行,這樣就可以避免SSR的錯誤