> ## 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;
```