# ui-utils

Browser UI utilities for observing element resize events.

---

## Functions

### `observeResize(elem, callback, options?): () => void`

Watches an element for size changes and calls `callback` whenever it resizes. Also calls `callback` immediately on setup so the caller can synchronise layout on first mount.

Returns a cleanup function. Call it to stop observing.

**Parameters**

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `elem` | `HTMLElement \| SVGElement` | — | The element to observe |
| `callback` | `() => void` | — | Called on every resize (and once on setup) |
| `options.debounce` | `number` | `66` | Debounce delay in ms passed to lodash `debounce` |

**Returns** `() => void` — call this to disconnect the `ResizeObserver` and stop observing.

```typescript
const cleanup = observeResize(containerEl, () => {
    // re-measure the element
    const { width, height } = containerEl.getBoundingClientRect();
    renderChart(width, height);
});

// later, when the component unmounts:
cleanup();
```

---

## Types

### `ResizeOptions`

```typescript
type ResizeOptions = {
    debounce?: number;
};
```

---

## Example

```typescript
import { observeResize } from "./ui-utils";

// Observe with custom debounce
const stop = observeResize(el, onResize, { debounce: 200 });

// React-style cleanup
useEffect(() => stop, []);
```
