https://github.com/patrikmasiar/react-keyboard-key

Container and hook with keyboard event listener.
https://github.com/patrikmasiar/react-keyboard-key

node-module npm package react typescript

Last synced: 11 days ago
JSON representation

Container and hook with keyboard event listener.

• Host: GitHub
• URL: https://github.com/patrikmasiar/react-keyboard-key
• Owner: patrikmasiar
• License: mit
• Created: 2021-03-11T19:29:09.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-10T15:58:42.000Z (over 2 years ago)
• Last Synced: 2024-09-15T05:48:57.005Z (about 2 months ago)
• Topics: node-module, npm, package, react, typescript
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/react-keyboard-key
• Size: 337 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm](https://img.shields.io/npm/v/react-keyboard-key?style=plastic)](https://www.npmjs.com/package/react-keyboard-key)

[![NPM](https://img.shields.io/npm/l/react-keyboard-key)](https://github.com/patrikmasiar/react-keyboard-key/blob/master/LICENSE)

[![NPM](https://img.shields.io/npm/dy/react-keyboard-key?style=plastic)](https://www.npmjs.com/package/react-keyboard-key)

# react-keyboard-key

Container and hook with keyboard event listener.

## Usage

#### Types

```javascript

keyInfo: {

  key: string | null;

  code: string | null;

  keyCode: number | null;

  output: KeyboardEvent | null,

};

addKeyListener: () => void;

removeEventListener: () => void;

onKeyDownCallback: (event: KeyboardEvent) => void;

```

### Container

```javascript

import { KeyListenerContainer } from 'react-keyboard-key';

...

const ExampleComponent: FC = ({ children }) => {

  return (

     {

        e.preventDefault();

      }}

    >

      {keyInfo => (

        


          {keyInfo.code}

        

      )}

    

  );

};


```

### Hook

```javascript

import { useKeyboardKey } from 'react-keyboard-key';

const ExampleComponent: FC = () => {

  const { keyInfo } = useKeyboardKey(onKeyDownCallback);

  const onKeyDownCallback = (e: KeyboardEvent) => {

    e.preventDefault

  };

  return (

    


      {keyInfo.code}

    

  );

};

```


## Project

* [whatdidipress.com](https://whatdidipress.com/)

* [Github project whatdidipress.com](https://github.com/patrikmasiar/what-did-i-press/)