useIsMobile

Returns true when the viewport is narrower than 768px (Tailwind's md breakpoint). Reacts to browser resize and device rotation via matchMedia. SSR-safe — returns false on the server and updates on the first client effect.

Usage

import { useIsMobile } from "@bloomkit/react";
 
function Nav() {
  const isMobile = useIsMobile();
 
  if (isMobile) {
    return <Drawer open={menuOpen} onOpenChange={setMenuOpen}>...</Drawer>;
  }
 
  return <DesktopNav />;
}

Return value

boolean — true when the viewport is narrower than 768px, false otherwise.

When to use it

Use useIsMobile for layout decisions keyed to viewport width — swapping a desktop sidebar for a mobile drawer, changing button sizes, collapsing navigation into a hamburger menu.

For pointer and touch capability detection (hover-capable vs touch-first input), prefer a matchMedia query for (any-pointer: coarse) directly — viewport width and input method are not the same thing, and conflating them leads to bugs on touchscreen laptops and stylus-equipped tablets.

SSR behavior

The hook returns false during server rendering and on the very first client render, then updates on the first useEffect tick. This avoids hydration mismatches but means your UI will briefly show the desktop layout on mobile devices before flipping. For layouts where this flash is unacceptable, render both versions and toggle visibility with Tailwind's md: breakpoint classes instead.