Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 4 months 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 (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-10T15:58:42.000Z (almost 3 years ago)
- Last Synced: 2024-09-15T05:48:57.005Z (5 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
[](https://www.npmjs.com/package/react-keyboard-key)
[](https://github.com/patrikmasiar/react-keyboard-key/blob/master/LICENSE)
[](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/)