useIsMobile
Phone or not, as a boolean — true below 640 px, the kit's one breakpoint, updated as the window changes.
Preview
This screen is
The line is 640 px, the kit's one breakpoint — resize the window to see it change.
Usage
import { useIsMobile } from "zostel-ui";
function Menu() {
const isMobile = useIsMobile();
return isMobile ? <MobileNav sections={…} /> : <NavigationHeader navItems={…} />;
}Returns
| Prop | Type | Default | Description |
|---|---|---|---|
isMobile | boolean | — | true when the window is narrower than 640 px (PHONE_QUERY, the kit’s one breakpoint: Tailwind’s sm, where every max-sm: phone layout starts). false on the server and while the page hydrates, so markup hydrates cleanly; a component first rendered in the browser knows from its first render. |
isMobilebooleantrue when the window is narrower than 640 px (PHONE_QUERY, the kit’s one breakpoint: Tailwind’s sm, where every max-sm: phone layout starts). false on the server and while the page hydrates, so markup hydrates cleanly; a component first rendered in the browser knows from its first render.
Prefer CSS
For layout, Tailwind’s sm: and max-sm: (the same 640 px) need no JavaScript. Use the hook when the component tree itself changes: the picker shell (a popover or a sheet), AvailabilityStrip (seven nights or four) and the date picker (two months or one) all read it, so the script and the styles agree on what a phone is.