useIsMobile
A responsive hook that detects whether the viewport is at mobile width (below 768px). Updates in real-time as the user resizes the browser window.
Preview
Current viewport:
Desktop
Breakpoint: 768px — resize your browser to see it change
Usage
tsx
import { useIsMobile } from "zostel-ui";
function MyComponent() {
const isMobile = useIsMobile();
return (
<div>
{isMobile ? (
<MobileLayout />
) : (
<DesktopLayout />
)}
</div>
);
}Return Value
| Return | Type | Description |
|---|---|---|
isMobile | boolean | true when viewport width is below 768px, false otherwise
|
How It Works
ts
// The hook uses window.matchMedia internally
const MOBILE_BREAKPOINT = 768;
// It listens for resize events via matchMedia
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
// Returns false during SSR, then updates on mount