Hooks
useIsMobile
Check whether the viewport is narrower than 768px, for behavior that CSS breakpoints can't handle. SSR-safe and updates on resize.
Preview
Usage
import { useIsMobile } from '@vitnode/core/hooks/use-mobile'const isMobile = useIsMobile()
return isMobile ? <PostActionsDrawer /> : <PostActionsDropdown />It returns true below 768px, where Tailwind's md: starts, and updates
live on resize or rotation.
Prefer CSS for layout
If only the look changes, use responsive classes. CSS is right on the first paint and needs no JavaScript:
<div className="flex flex-col gap-4 md:flex-row">...</div>Reach for the hook when the behavior changes: a Drawer instead of a Dropdown Menu, skipping a heavy component, or loading fewer items.
Server rendering
The server can't see the screen, so the hook returns false during SSR and
hydration, then switches without a mismatch warning. A phone may briefly see the
desktop version. Components that mount later in the browser get the real value
on their first render.
Returns
Prop
Type