# useResizeObserver
> Wraps the ResizeObserver API to detect size changes of an element.

Wraps the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to detect size changes of an element. The observer lifecycle is managed and cleaned up automatically.

## Import

```js
import { useResizeObserver } from '@volue/wave-react';
```

## Example

```jsx
() => {
  const ref = React.useRef(null);
  const [size, setSize] = React.useState({ width: 0, height: 0 });

  useResizeObserver(ref, ([entry]) => {
    setSize({
      width: Math.round(entry.contentRect.width),
      height: Math.round(entry.contentRect.height)
    });
  });

  return (
    <Flex flow="column" gap="spacingS">
      <Text>{'Size: ' + size.width + ' x ' + size.height}</Text>
      <Box
        ref={ref}
        css={{
          background: '$backgroundNeutralModerate',
          resize: 'both',
          overflow: 'auto',
          height: 100
        }}
      >
        {'Resize me!'}
      </Box>
    </Flex>
  );
};
```

---

## API reference

### Arguments

| Name       | Type                                    | Default | Description                                                                 | Required |
| ---------- | --------------------------------------- | ------- | --------------------------------------------------------------------------- | -------- |
| `target`   | `Element \| RefObject<Element> \| null` | `—`     | The element or ref to observe for size changes.                             | Yes      |
| `callback` | `ResizeObserverCallback`                | `—`     | Function called with resize observer entries when the element size changes. | Yes      |

### Returns

`void`