32 lines
984 B
TypeScript
32 lines
984 B
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
export type DesktopViewport = 'tablet' | 'smallPc' | 'standardPc' | 'large2k' | 'ultra4k';
|
|
|
|
const getViewport = (width: number): DesktopViewport => {
|
|
if (width < 1024) return 'tablet';
|
|
if (width < 1280) return 'smallPc';
|
|
if (width < 1920) return 'standardPc';
|
|
if (width < 3840) return 'large2k';
|
|
return 'ultra4k';
|
|
};
|
|
|
|
const getCurrentViewport = () => {
|
|
if (typeof window === 'undefined') return 'standardPc';
|
|
return getViewport(window.innerWidth);
|
|
};
|
|
|
|
export function useDesktopViewport() {
|
|
const [viewport, setViewport] = useState<DesktopViewport>(getCurrentViewport);
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => setViewport(getCurrentViewport());
|
|
window.addEventListener('resize', handleResize);
|
|
handleResize();
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
return viewport;
|
|
}
|
|
|
|
export const desktopViewportClass = (viewport: DesktopViewport) => `desktop-${viewport}`;
|