# useOnClickAway
> Detects clicks outside specified elements and invokes a handler.

Detects clicks outside specified elements and invokes a handler. The listener can be toggled on and off, and multiple exclusion refs are supported.

## Import

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

## Example

```jsx
() => {
  const ref = React.useRef(null);
  const [clickedAway, setClickedAway] = React.useState(false);
  const [isActive, setIsActive] = React.useState(true);

  useOnClickAway(() => setClickedAway(true), isActive, ref);

  return (
    <Flex flow="column">
      <Box
        ref={ref}
        padding="spacingM"
        css={{ background: '$backgroundNeutralModerate' }}
        onClick={() => setClickedAway(false)}
      >
        <Text>
          {clickedAway
            ? 'Clicked away! Click here to reset.'
            : 'Click outside this box.'}
        </Text>
      </Box>
      <Switch.Root isActive={isActive} onIsActiveChange={setIsActive}>
        <Switch.Label>{'Click away listener active'}</Switch.Label>
        <Switch.Indicator>
          <Switch.On>{'On'}</Switch.On>
          <Switch.Off>{'Off'}</Switch.Off>
        </Switch.Indicator>
      </Switch.Root>
    </Flex>
  );
};
```

---

## API reference

### Arguments

| Name       | Type                               | Default | Description                                                            | Required |
| ---------- | ---------------------------------- | ------- | ---------------------------------------------------------------------- | -------- |
| `handler`  | `((event: Event) => void) \| null` | `—`     | Callback invoked when a click occurs outside the referenced elements.  | Yes      |
| `isActive` | `boolean`                          | `—`     | Whether the click-away listener is active.                             | Yes      |
| `...refs`  | `RefObject<HTMLElement>[]`         | `—`     | Refs to elements that should be excluded from outside-click detection. | Yes      |

### Returns

`void`