Lotus Bot
61a1f008d0
- i18next 23->26 + react-i18next 15->17 - prettier 2->3, reformat all files - replace @fontsource/inter with @fontsource-variable/inter 5, update import path - domhandler 5->6 (aligns with transitive deps) - lint-staged 16->17
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import { createContext, useCallback, useContext, useState } from 'react';
|
|
import { useElementSizeObserver } from './useElementSizeObserver';
|
|
|
|
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 => {
|
|
const [size, setSize] = useState<ScreenSize>(getScreenSize(document.body.clientWidth));
|
|
|
|
useElementSizeObserver(
|
|
useCallback(() => document.body, []),
|
|
useCallback((width) => setSize(getScreenSize(width)), []),
|
|
);
|
|
|
|
return size;
|
|
};
|
|
|
|
const ScreenSizeContext = createContext<ScreenSize | null>(null);
|
|
export const ScreenSizeProvider = ScreenSizeContext.Provider;
|
|
|
|
export const useScreenSizeContext = (): ScreenSize => {
|
|
const screenSize = useContext(ScreenSizeContext);
|
|
if (screenSize === null) {
|
|
throw new Error('Screen size not provided!');
|
|
}
|
|
return screenSize;
|
|
};
|