Charonyu's Profile

這個應該十分常見，為了想要做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就不會執行

[Day 8] 今天來個簡單的練習寫useWindowSize