# useGraceArea
> Creates a grace area polygon for smooth pointer transitions between trigger and content elements.

Creates an invisible buffer zone between a trigger element and its content, preventing accidental closure during pointer transitions. Used internally by hover-based components like [tooltips](https://next.wave-design-system.pages.dev/components/tooltip.md).

## Import

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

## Example

```jsx
() => {
  const [isOpen, setIsOpen] = React.useState(false);
  const [triggerEl, setTriggerEl] = React.useState(null);
  const [contentEl, setContentEl] = React.useState(null);
  const [inTransit, setInTransit] = React.useState(false);

  const handleClose = React.useCallback(() => setIsOpen(false), []);
  const handleInTransitChange = React.useCallback(
    value => setInTransit(value),
    []
  );

  useGraceArea({
    triggerEl,
    contentEl,
    onClose: handleClose,
    onPointerInTransitChange: handleInTransitChange
  });

  return (
    <Flex flow="column" cross="start">
      <Button ref={setTriggerEl} onPointerEnter={() => setIsOpen(true)}>
        {'Hover me'}
      </Button>
      {isOpen && (
        <Flex
          flow="column"
          padding="spacingM"
          gap="spacingS"
          ref={setContentEl}
          css={{
            background: '$backgroundNeutralModerate'
          }}
        >
          <Text>
            {'Content stays open while pointer moves between elements.'}
          </Text>
          <Text>{`Pointer in transit: ${String(inTransit)}`}</Text>
        </Flex>
      )}
    </Flex>
  );
};
```

---

## API reference

### Arguments

| Name                       | Type                           | Default | Description                                              | Required |
| -------------------------- | ------------------------------ | ------- | -------------------------------------------------------- | -------- |
| `triggerEl`                | `HTMLElement \| null`          | `—`     | The trigger element (e.g. button that opens a menu).     | Yes      |
| `contentEl`                | `HTMLElement \| null`          | `—`     | The content element (e.g. menu popup).                   | Yes      |
| `onClose`                  | `() => void`                   | `—`     | Callback invoked when the pointer leaves the grace area. |          |
| `onPointerInTransitChange` | `(inTransit: boolean) => void` | `—`     | Callback invoked when the pointer transit state changes. |          |

### Returns

`void`