# useClickOutside

*Category:* Utilities
*Section:* DOM behavior hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useClickOutside
*Captured:* 2026-04-27T14:59:33.323Z

The useClickOutside hook allows to easily detect events outside a referenced element.

## useClickOutside

### Example: Example 1

Click outside the box

#### React (tsx)

```tsx
import { useState } from 'react';

import useClickOutside from '@rio-cloud/rio-uikit/useClickOutside';

export default () => {
    const [background, setBackground] = useState('bg-highlight');

    const ref = useClickOutside(() => setBackground('bg-light'));

    return (
        <div className='display-flex flex-column justify-content-center align-items-center height-100'>
            <label className='margin-bottom-10'>Click outside the box</label>
            <div
                ref={ref}
                className={`width-100 height-100 cursor-pointer rounded ${background}`}
                onClick={() => setBackground('bg-highlight')}
            />
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex flex-column justify-content-center align-items-center height-100">
    <label class="margin-bottom-10">Click outside the box</label>
    <div class="width-100 height-100 cursor-pointer rounded bg-light">
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| callback | (event: MouseEvent \| TouchEvent) => void | — | The callback function to be triggered when click or touch events happen outside the referenced element. |
| eventTypes | keyof DocumentEventMap | ['mousedown', 'touchstart'] | Customize list of events to listen on. |
| isActive | boolean | true | Flag to only listen for clicks when target element active. This comes in handy for dropdowns where the event can be registered only when the dropdown is open. |