# useIntersectionObserver
> Wraps the IntersectionObserver API to detect when an element enters or leaves the viewport.

Wraps the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) to detect when an element enters or leaves the viewport. The observer is managed and cleaned up automatically.

## Import

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

## Example

> **Tip**
>
> Scroll down and observe changing visibility boolean as the observed element enters and leaves the viewport.

```jsx resizable
() => {
  const ref = React.useRef(null);
  const [isVisible, setIsVisible] = React.useState(false);

  useIntersectionObserver(
    ref,
    ([entry]) => {
      setIsVisible(entry.isIntersecting);
    },
    { threshold: 0.5 }
  );

  return (
    <Flex flow="column" gap="spacingL">
      <Flex
        ref={ref}
        padding="spacingM"
        css={{ background: '$backgroundNeutralModerate' }}
      >
        <Text>{'Observed element'}</Text>
      </Flex>
      <Text>{'Element visible: ' + String(isVisible)}</Text>
    </Flex>
  );
};
```

---

## API reference

### Arguments

| Name       | Type                                    | Default | Description                                                                 | Required |
| ---------- | --------------------------------------- | ------- | --------------------------------------------------------------------------- | -------- |
| `target`   | `Element \| RefObject<Element> \| null` | `—`     | The element or ref to observe.                                              | Yes      |
| `callback` | `IntersectionObserverCallback`          | `—`     | Function called with intersection observer entries when visibility changes. | Yes      |
| `options`  | `IntersectionObserverInit`              | `{}`    | Observer configuration (root, rootMargin, threshold).                       |          |

### Returns

`void`