An object with boolean flags indicating the active breakpoint:
isXL — viewport width is at least --bp-xlisL — viewport width is between --bp-l and --bp-xlisM — viewport width is between --bp-m and --bp-lisS — viewport width is between --bp-s and --bp-misXS — viewport width is below --bp-sconst { isXL, isM, isXS } = useBreakpoint();
return (
<>
{isXL && <DesktopLayout />}
{isM && <TabletLayout />}
{isXS && <MobileLayout />}
</>
);
export const useBreakpoint = () => {
const [breakpoint, setBreakpoint] = useState(getCurrentBreakpoint(window.innerWidth))
useEffect(() => {
const handler = () => {
const bp = getCurrentBreakpoint(window.innerWidth)
if (bp !== breakpoint) {
setBreakpoint(bp)
}
}
window.addEventListener('resize', handler)
return () => window.removeEventListener('resize', handler)
}, [breakpoint])
return {
isXL: breakpoint === 'xl',
isL: breakpoint === 'l',
isM: breakpoint === 'm',
isS: breakpoint === 's',
isXS: breakpoint === 'xs',
}
}
A React hook that tracks the current responsive breakpoint based on the window width and CSS breakpoint variables. It listens to window resize events and updates the active breakpoint when it changes.
Breakpoint values are read from CSS custom properties (e.g.
--bp-xl,--bp-l, etc.), allowing the hook to stay in sync with the application's SCSS breakpoint definitions.