
# useDimensions
Measures an element's dimensions using ResizeObserver.

## Import

```tsx
import { useDimensions } from '@coinbase/cds-web/hooks/useDimensions'
```

## Examples

### Basic usage

```tsx live
function Example() {
  const ref = useRef(null);
  const { width, height } = useDimensions({ ref });

  return (
    <Box ref={ref} padding={3} background="bgAlternate" borderRadius={300} width="100%">
      <TextHeadline>
        This box is {width}px wide and {height}px tall
      </TextHeadline>
    </Box>
  );
}
```

### With Breakpoints

```tsx live
function Example() {
  const ref = useRef(null);
  const { width, currentBreakpoint } = useDimensions({
    ref,
    breakpoints: {
      small: 300,
      medium: 400,
      large: 500,
    },
  });

  return (
    <Box ref={ref} padding={3} background="bgAlternate" borderRadius={300} width="100%">
      <VStack gap={2}>
        <TextHeadline>Width: {width}px</TextHeadline>
        <TextHeadline>Current breakpoint: {currentBreakpoint || 'none'}</TextHeadline>
      </VStack>
    </Box>
  );
}
```


