# useKey

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

The useKey hook allows to easily detect key events. It can be used in two ways, either to specify a specific key to listen for or with a callback to listen for all keys.

## useKey

### Example: Example 1

Key

pressed

Key

pressed

Key

pressed

#### React (tsx)

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

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

const Usage1 = () => {
    const [pressedKey, setPressedKey] = useState(' ');

    // Use the useKey hook to listen for any key presses
    useKey((event: KeyboardEvent) => {
        console.log(event);
        event.key === ' ' ? setPressedKey(event.code) : setPressedKey(event.key);
    });

    return (
        <div className='display-flex justify-content-center align-items-center height-50'>
            <div className='margin-right-10'>Key</div>
            <div className='label label-default'>{pressedKey}</div>
            <div className='margin-left-10'>pressed</div>
        </div>
    );
};

const Usage2 = () => {
    const [pressedKey, setPressedKey] = useState(' ');

    // Use the useKey hook to listen for any key presses with optional event types
    useKey(
        (event: KeyboardEvent) => {
            if (event.shiftKey) {
                setPressedKey(`Shift + ${event.key}`);
            } else if (event.metaKey) {
                setPressedKey(`Cmd + ${event.key}`);
            } else if (event.key === ' ') {
                setPressedKey(event.code);
            } else {
                setPressedKey(event.key);
            }
        },
        ['keyup'] // Listens for the 'keyup' event
    );

    return (
        <div className='display-flex justify-content-center align-items-center height-50'>
            <div className='margin-right-10'>Key</div>
            <div className='label label-default'>{pressedKey}</div>
            <div className='margin-left-10'>pressed</div>
        </div>
    );
};

const Usage3 = () => {
    const [pressedKey, setPressedKey] = useState(' ');

    // Use the useKey hook to listen for the Enter key press
    useKey('Enter', (_event: KeyboardEvent) => {
        console.log('Enter key pressed');
        setPressedKey('Enter');
    });

    return (
        <div className='display-flex justify-content-center align-items-center height-50'>
            <div className='margin-right-10'>Key</div>
            <div className='label label-default'>{pressedKey}</div>
            <div className='margin-left-10'>pressed</div>
        </div>
    );
};

const UseKeyExample = () => (
    <div className='display-flex flex-column justify-content-center align-items-center'>
        <Usage1 />
        <Usage2 />
        <Usage3 />
    </div>
);

export default UseKeyExample;
```

#### HTML (html)

```html
<div class="display-flex flex-column justify-content-center align-items-center">
    <div class="display-flex justify-content-center align-items-center height-50">
        <div class="margin-right-10">Key</div>
        <div class="label label-default"> </div>
        <div class="margin-left-10">pressed</div>
    </div>
    <div class="display-flex justify-content-center align-items-center height-50">
        <div class="margin-right-10">Key</div>
        <div class="label label-default"> </div>
        <div class="margin-left-10">pressed</div>
    </div>
    <div class="display-flex justify-content-center align-items-center height-50">
        <div class="margin-right-10">Key</div>
        <div class="label label-default"> </div>
        <div class="margin-left-10">pressed</div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| keyOrCallback | string \| ((event: KeyboardEvent) => void) | — | Either a key string (e.g., "Enter") or a callback function |
| callbackOrEventTypes | (event: KeyboardEvent) => void \| KeyboardEventType[] | — | If the first argument is a key, this should be the callback function. If the first argument is a callback, this is an optional array of event types. |
| eventTypesOrNode | KeyboardEventType[] \| Document | [keydown] | If the first argument is a key, this should be an array of event types. If the first argument is a callback, this is the node (defaults to document). |
| node | Node | document | Optional DOM node to attach the event listener to (defaults to document). |