38 lines
954 B
TypeScript
38 lines
954 B
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
const useScreen = () => {
|
|
const [screen, setScreen] = useState(0);
|
|
const [size, setSize] = useState<'sm' | 'md' | 'lg' | 'xl' | 'default'>('default');
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
setScreen(window.innerWidth);
|
|
|
|
if (window.innerWidth < 640) {
|
|
setSize('sm');
|
|
} else if (window.innerWidth < 768) {
|
|
setSize('md');
|
|
} else if (window.innerWidth < 1024) {
|
|
setSize('lg');
|
|
} else if (window.innerWidth < 1280) {
|
|
setSize('xl');
|
|
} else {
|
|
setSize('default');
|
|
}
|
|
};
|
|
|
|
// Set initial value
|
|
handleResize();
|
|
|
|
// Add event listener
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
// Cleanup
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
return { size, screen };
|
|
};
|
|
|
|
export default useScreen;
|