Usage
import { useBreakpoint } from "@servicetitan/anvil2";
function ResponsiveComponent() {
const breakpoint = useBreakpoint();
return (
<div>
{/* Mobile-first: lg is true for lg, xl, and xxl */}
{breakpoint?.lg ? (
<DesktopLayout />
) : (
<MobileLayout />
)}
</div>
);
}
Return Value
| Property | Type | Description |
|---|
name | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | Current breakpoint name |
min | number | undefined | Minimum width for this breakpoint |
max | number | undefined | Maximum width for this breakpoint |
orientation | "portrait" | "landscape" | Current device orientation |
innerWidth | number | Current viewport width |
innerHeight | number | Current viewport height |
xs | boolean | Always true (mobile-first: xs and above) |
sm | boolean | True when viewport ≥ 640px |
md | boolean | True when viewport ≥ 768px |
lg | boolean | True when viewport ≥ 1024px |
xl | boolean | True when viewport ≥ 1280px |
xxl | boolean | True when viewport ≥ 1536px |
Options
| Property | Type | Description |
|---|
disable | boolean | Disables the hook and prevents resize event listeners |
Examples
Conditional Rendering
const breakpoint = useBreakpoint();
return (
<>
{breakpoint?.lg ? (
<DesktopComponent />
) : (
<MobileComponent />
)}
</>
);
With Disabled Option
// Disable breakpoint detection for SSR or testing
const breakpoint = useBreakpoint({ disable: true });
Breakpoint Values
The hook uses the following breakpoint values:
| Breakpoint | Min Width |
|---|
xs | 0px |
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |
xxl | 1536px |
Mobile-First Approach
The boolean flags (xs, sm, md, lg, xl, xxl) follow a mobile-first approach:
xs is always truesm is true when viewport width is 640px or greatermd is true when viewport width is 768px or greater- And so on…
This makes it easy to write mobile-first responsive logic:
// This pattern: "default mobile, override for desktop"
const columns = breakpoint?.lg ? 3 : 1;
Last modified on January 23, 2026
