自定义 React Hook - useDevice (判断设备尺寸)

App.tsx

const App = () => {
  const device = useDevice();
  
  return <div className={getClassName(device)}>
    Test
  </div>
}

useDevice.ts

import { useWindowWidth } from "@react-hook/window-size";
import { useEffect } from "react";
import { useRafState } from "react-use";

export const PHONE_SIZE = 320;
export const IPAD_SIZE = 680;
export const PC_SIZE = 860;
export const BIG_PC_SIZE = 1300;

interface IDevice {
  isPhone: boolean;
  isPad: boolean;
  isPC: boolean;
  isBigPC: boolean;
}

const checkDevice = (windowWidth: number) => {
  let isPhone = false,
    isPad = false,
    isPC = false,
    isBigPC = false;

  if (windowWidth >= PHONE_SIZE && windowWidth < IPAD_SIZE) isPhone = true;
  if (windowWidth >= IPAD_SIZE && windowWidth < PC_SIZE) isPad = true;
  if (windowWidth >= PC_SIZE && windowWidth < BIG_PC_SIZE) isPC = true;
  if (windowWidth >= BIG_PC_SIZE) isBigPC = true;

  return {
    isPhone,
    isPad,
    isPC,
    isBigPC,
  };
};

export const getClassName = (device: IDevice): string => {
  if (device.isPhone) return "phone";
  if (device.isPad) return "pad";
  if (device.isPC) return "pc";
  if (device.isBigPC) return "bpc";

  return "";
};

export const useDevice = () => {
  // 使用 useState 也可以
  const [state, setState] = useRafState<IDevice>({
    isPhone: false,
    isPad: false,
    isPC: false,
    isBigPC: false,
  });

  // 监听 window width
  const windowWidth = useWindowWidth({ leading: true, wait: 100 });

  useEffect(() => {
    const deviceState = checkDevice(windowWidth);
    setState(deviceState);
  }, [windowWidth]);

  return state;
};