# useContainerQuery (/docs/hooks/use-container-query)





`useContainerQuery` tracks whether a container element's width is below `maxWidth`, updating live as the element is resized. It's the container-query counterpart to [`useMediaQuery`](/docs/hooks/use-media-query), for components that need to respond to their own allocated space rather than the browser viewport — embedded in a panel, a resizable pane, or anything narrower than the window. `AppShell`'s mobile `breakpoint` works this way.

```tsx
import { useContainerQuery } from '@42-central/ui-react';
import { useRef } from 'react';

const ref = useRef<HTMLDivElement>(null);
const isNarrow = useContainerQuery(ref, 768);

<div ref={ref}>{isNarrow ? 'Narrow' : 'Wide'}</div>;
```

SSR-safe via `useSyncExternalStore`: the hydration snapshot is always `false`, since a server can't know the container's real size — a real browser corrects it shortly after mount, as `ResizeObserver` fires once immediately upon `observe()` with the element's current size.

## Usage [#usage]

Drag the box below to resize it — the reported state tracks the container's own width, not the browser window's.

<Preview code="&#x22;const ref = useRef(null);\nconst isNarrow = useContainerQuery(ref, 400);\n\n<div ref={ref}>{isNarrow ? 'Narrow (< 400px)' : 'Wide (≥ 400px)'}</div>&#x22;">
  <ContainerQueryDemo />
</Preview>

## API [#api]

<TypeTable
  type="{
  ref: {
    type: 'RefObject<Element | null>',
    required: true,
    description: 'Ref of the container element to measure.',
  },
  maxWidth: {
    type: 'number',
    required: true,
    description: &#x22;The width threshold, in pixels, below which the hook returns true.&#x22;,
  },
}"
/>

Returns a `boolean` — `true` when the container's width is below `maxWidth`.