# useEvent

*Category:* Utilities
*Section:* UI state & input hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useEvent
*Captured:* 2026-04-27T14:59:43.176Z

The useEvent hook allows to easily detect given events registered on the document.

## useEvent

### Example: Example 1

Mouse position:

#### React (tsx)

```tsx
import { useState } from 'react';
import { throttle } from 'es-toolkit/function';

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

const THROTTLE_TIMEOUT_IN_MS = 100;

export default () => {
    const [mousePosition, setMousePosition] = useState(' ');

    const handleMouseMove = throttle(event => {
        setMousePosition(`x: ${event.screenX} - y: ${event.screenY}`);
    }, THROTTLE_TIMEOUT_IN_MS);

    useEvent('mousemove', handleMouseMove);

    return (
        <div className='display-flex justify-content-center align-items-center height-50'>
            <div className='margin-right-10'>{'Mouse position: '}</div>
            <div className='label label-default'>{mousePosition}</div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex justify-content-center align-items-center height-50">
    <div class="margin-right-10">Mouse position: </div>
    <div class="label label-default">x: 775 - y: 355</div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| callback | Function | — | The callback function to be triggered. It passes the key event as argument. |
| eventType | String | — | The event type to listen on. |
| options | Boolean | false | Flag for event listener options. |
| target | Node | document | The target the event shall be registered for. Use "window" for "resize" events. |