# useEsc

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

The useEsc hook allows to easily detect keydown events for escape key to to react on. This comes in handy when closing something or aborting some operation on esc.

## useEsc

### Example: Example 1

Press "esc" key

#### React (tsx)

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

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

export default () => {
    const [log, setLog] = useState('');

    useEsc(event => {
        console.log(event);
        setLog(`${log}Esc pressed\n`);
    });

    return (
        <div className='display-flex flex-column justify-content-center align-items-center height-100'>
            <label className='margin-bottom-10'>Press "esc" key</label>
            <textarea className='form-control width-50pct' value={log} readOnly rows={4} />
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex flex-column justify-content-center align-items-center height-100">
    <label class="margin-bottom-10">Press "esc" key</label>
    <textarea class="form-control width-50pct" readonly="" rows="4">
</textarea>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| callback | Function | — | The callback function to be triggered. It passes the key event as argument. |