42 lines
1019 B
JavaScript
42 lines
1019 B
JavaScript
import { useEffect, useState } from 'react';
|
|
|
|
// Hardcoded breakpoints based on your Tailwind config
|
|
const breakpoints = {
|
|
xxxxs: 0,
|
|
xxxs: 275,
|
|
xxs: 320,
|
|
xs: 475,
|
|
sm: 640,
|
|
md: 768,
|
|
lg: 1024,
|
|
xl: 1280,
|
|
'2xl': 1400,
|
|
};
|
|
|
|
const getCurrentBreakpoint = () => {
|
|
if (typeof window === 'undefined') return null; // Handle SSR
|
|
|
|
const sortedBreakpoints = Object.entries(breakpoints).sort((a, b) => b[1] - a[1]);
|
|
|
|
return sortedBreakpoints.find(([_, width]) => window.innerWidth >= width)?.[0] || 'xxs';
|
|
};
|
|
|
|
const useTailwindBreakpoint = () => {
|
|
const [breakpoint, setBreakpoint] = useState(null);
|
|
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
setBreakpoint(getCurrentBreakpoint());
|
|
};
|
|
|
|
handleResize(); // Set initial breakpoint
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
return () => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
return breakpoint;
|
|
};
|
|
|
|
export default useTailwindBreakpoint;
|