use-mobile

1// Ported from shadcn-ui/ui@4baadbc6517070ae8f8feb2c97037adc2b305544
2// apps/v4/registry/bases/radix/hooks/use-mobile.ts. React hooks map onto
3// octane's; the explicit `[]` dependency array is retained from upstream
4// (subscribe once on mount). SSR-safe: `window` is only touched in the effect.
5import { useEffect, useState } from 'octane';
6 
7const MOBILE_BREAKPOINT = 768;
8 
9export function useIsMobile() {
10	const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
11 
12	useEffect(() => {
13		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
14		const onChange = () => {
15			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
16		};
17		mql.addEventListener('change', onChange);
18		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
19		return () => mql.removeEventListener('change', onChange);
20	}, []);
21 
22	return !!isMobile;
23}