37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
|
import { useCallback, useState } from 'react';
|
||
|
|
import { getResizeObserverEntry, useResizeObserver } from './useResizeObserver';
|
||
|
|
|
||
|
|
export const TABLET_BREAKPOINT = 1124;
|
||
|
|
export const MOBILE_BREAKPOINT = 750;
|
||
|
|
|
||
|
|
export enum ScreenSize {
|
||
|
|
Desktop = 'Desktop',
|
||
|
|
Tablet = 'Tablet',
|
||
|
|
Mobile = 'Mobile',
|
||
|
|
}
|
||
|
|
|
||
|
|
export const getScreenSize = (width: number): ScreenSize => {
|
||
|
|
if (width > TABLET_BREAKPOINT) return ScreenSize.Desktop;
|
||
|
|
if (width > MOBILE_BREAKPOINT) return ScreenSize.Tablet;
|
||
|
|
return ScreenSize.Mobile;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const useScreenSize = (): [ScreenSize, number] => {
|
||
|
|
const [size, setSize] = useState<[ScreenSize, number]>([
|
||
|
|
getScreenSize(document.body.clientWidth),
|
||
|
|
document.body.clientWidth,
|
||
|
|
]);
|
||
|
|
useResizeObserver(
|
||
|
|
useCallback((entries) => {
|
||
|
|
const bodyEntry = getResizeObserverEntry(document.body, entries);
|
||
|
|
if (bodyEntry) {
|
||
|
|
const bWidth = bodyEntry.contentRect.width;
|
||
|
|
setSize([getScreenSize(bWidth), bWidth]);
|
||
|
|
}
|
||
|
|
}, []),
|
||
|
|
document.body
|
||
|
|
);
|
||
|
|
|
||
|
|
return size;
|
||
|
|
};
|