Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProKnow which named breakpoint is active (Tailwind defaults or your own) and ask isAtLeast or isBelow, with a server default.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when code, not CSS, must branch on the layout size: render a drawer on small screens and a sidebar on large ones, or change how many items a carousel shows.
Do not use it for styling; use Tailwind's responsive prefixes. For an arbitrary query use useMediaQuery.
import { useBreakpoint } from "@/hooks/use-breakpoint"const { current, isAtLeast } = useBreakpoint()
const showSidebar = isAtLeast("lg")useBreakpoint(options?): { current, isAtLeast, isBelow }
| Option | Type | Default | Description |
|---|---|---|---|
breakpoints | Record<string, number> | sm 640, md 768, lg 1024, xl 1280, 2xl 1536 | Minimum widths in px, any names. |
defaultValue | string | "base" | Breakpoint on the server and when hydrating. |
current is the largest breakpoint whose minimum width matches, or "base" below all of them. isAtLeast(name) and isBelow(name) compare against it. Pass a stable breakpoints object (define it outside the component).
A hook has no markup. Switching components by breakpoint must keep the same content and controls available; check the result at 200% zoom as well.
The hook ships with renderHook tests (use-breakpoint.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.