useIsMobile
Returns true when the viewport width is below a configurable breakpoint, and re-evaluates reactively on resize.
Signature
function useIsMobile(mobileBreakpoint?: number): boolean;
| Parameter | Type | Default | Description |
|---|---|---|---|
mobileBreakpoint |
number |
1024 |
Viewport width (px) at which the device is considered mobile |
Usage
function Navbar() {
const isMobile = useIsMobile();
return isMobile ? <MobileNav /> : <DesktopNav />;
}
// Custom breakpoint
const isTablet = useIsMobile(768);
Notes
- Uses
window.matchMediafor the resize listener (more efficient thanresizeevent polling). - Returns
falseduring SSR (initial state isundefined, coerced via!!). - Client-only (
'use client').