36 lines
718 B
TypeScript
36 lines
718 B
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { useState, useEffect } from 'react'
|
||
|
|
|
||
|
|
export const MOBILE = 'MOBILE'
|
||
|
|
export const TABLET = 'TABLET'
|
||
|
|
export const DESKTOP = 'DESKTOP'
|
||
|
|
|
||
|
|
const getDevice = (width: number) => {
|
||
|
|
if (width < 768) return MOBILE
|
||
|
|
else if (width < 992) return TABLET
|
||
|
|
else return DESKTOP
|
||
|
|
}
|
||
|
|
|
||
|
|
export function useViewport() {
|
||
|
|
const [viewport, setViewport] = useState({
|
||
|
|
width: 0,
|
||
|
|
device: 'DESKTOP'
|
||
|
|
});
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const handleResize = () => {
|
||
|
|
setViewport({
|
||
|
|
width: window.innerWidth,
|
||
|
|
device: getDevice(window.innerWidth)
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
handleResize();
|
||
|
|
|
||
|
|
window.addEventListener('resize', handleResize);
|
||
|
|
return () => window.removeEventListener('resize', handleResize);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return viewport;
|
||
|
|
}
|