import { Meta } from "@storybook/blocks";

<Meta title="Hooks/use-key-press" />

# use-key-press hook

Call a function when a key is pressed.

## Purpose

The use-key-press hook is used to call a function when a specific key is
pressed. This is useful when you want to add a simple keyboard command to a
component.

## Usage

A common scenario is pressing the escape key to close a popover. In the example
below, this is paired with `useDisclosure`.

```jsx
import React from "react";
import { useKeyPress, KEY_CODE, useDisclosure } from "@conveyorhq/arrow-ds";

export const Component = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  useKeyPress(KEY_CODE.ESC, onClose);

  return (
    <Box>
      <Button onClick={onOpen}>Open Popover</Button>
      {isOpen && <Box>Popover; press escape to close</Box>}
    </Box>
  );
};
```

## API

### targetKeyCode

The key being pressed

Required: Yes<br />
Default value: N/A<br />
Type: `number`, `KEY_CODE`

### callback

The function to call

Required: Yes<br />
Default value: N/A<br />
Type: `function`