> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# useBreakpoint

> Detects the current viewport breakpoint and provides responsive boolean flags.

## Usage

```tsx theme={null}
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

```tsx theme={null}
const breakpoint = useBreakpoint();

return (
  <>
    {breakpoint?.lg ? (
      <DesktopComponent />
    ) : (
      <MobileComponent />
    )}
  </>
);
```

### With Disabled Option

```tsx theme={null}
// 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 `true`
* `sm` is `true` when viewport width is 640px or greater
* `md` is `true` when viewport width is 768px or greater
* And so on...

This makes it easy to write mobile-first responsive logic:

```tsx theme={null}
// This pattern: "default mobile, override for desktop"
const columns = breakpoint?.lg ? 3 : 1;
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.