@withvoid/melting-pot/docs/hooks/useKeyPress/index.mdx

A react utility library

---
name: useKeyPress
menu: Hooks
---

import { Playground } from 'docz';
import Faces from './Faces';
import { useKeyPress } from '../../../src';

# useKeyPress

```
const [isKeyPressed, key] = useKeyPress('a');
```

- First argument returns a boolean if the key is pressed.
- Second argument returns a string of the key e.g, in case of the example above
  it is "a".

## Examples

<Playground>
  {() => {
    const [isHappyPress, happyKey] = useKeyPress('h');
    const [isSadPress, sadKey] = useKeyPress('s');
    const [isRobotPress, robotKey] = useKeyPress('r');
    const [isFoxPress, foxPress] = useKeyPress('f');
    const getFaceDetails = ({ isActive, key, face }) => ({ isActive, face, key });
    return (
      <Faces
        types={[
          getFaceDetails({ isActive: isHappyPress, key: happyKey, face: '😊' }),
          getFaceDetails({ isActive: isSadPress, key: sadKey, face: '😢' }),
          getFaceDetails({ isActive: isRobotPress, key: robotKey, face: '🤖' }),
          getFaceDetails({ isActive: isFoxPress, key: foxPress, face: '🦊' }),
        ]}
      />
    );
  }}
</Playground>