35 lines
735 B
TypeScript
35 lines
735 B
TypeScript
|
/**
|
||
|
|
* 屏幕尺寸 Hook
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { useMemo } from 'react';
|
||
|
|
import { useWindowDimensions } from './useWindowDimensions';
|
||
|
|
import { useBreakpoint } from './useBreakpoint';
|
||
|
|
|
||
|
|
export interface ScreenSizeInfo {
|
||
|
|
width: number;
|
||
|
|
height: number;
|
||
|
|
isMobile: boolean;
|
||
|
|
isTablet: boolean;
|
||
|
|
isDesktop: boolean;
|
||
|
|
isWide: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 屏幕尺寸 Hook
|
||
|
|
* 返回屏幕尺寸和断点信息
|
||
|
|
*/
|
||
|
|
export function useScreenSize(): ScreenSizeInfo {
|
||
|
|
const { width, height } = useWindowDimensions();
|
||
|
|
const { isMobile, isTablet, isDesktop, isWide } = useBreakpoint();
|
||
|
|
|
||
|
|
return useMemo(() => ({
|
||
|
|
width,
|
||
|
|
height,
|
||
|
|
isMobile,
|
||
|
|
isTablet,
|
||
|
|
isDesktop,
|
||
|
|
isWide,
|
||
|
|
}), [width, height, isMobile, isTablet, isDesktop, isWide]);
|
||
|
|
}
|