Skip to main content

React keyboard key

npm NPM

Technologies

#typescript #hooks #react

Overview

React keyboard key is a simply package for projects using React JS. It is a library based on keydown and keyup events. The package is listening for what key on keyboard was pressed and it returns the whole event data. It can be used as a component or a hook as well.

Usage

Types

keyInfo: {
  key: string | null;
  code: string | null;
  keyCode: number | null;
  output: KeyboardEvent | null,
};
addKeyListener: () => void;
removeEventListener: () => void;
onKeyDownCallback: (event: KeyboardEvent) => void;

Container

import { KeyListenerContainer } from 'react-keyboard-key';
...
const ExampleComponent: FC<Props> = ({ children }) => {
  return (
    <KeyListenerContainer
      onKeyDownCallback={e => {
        e.preventDefault();
      }}
    >
      {keyInfo => (
        <div>
          {keyInfo.code}
        </div>
      )}
    </KeyListenerContainer>
  );
};

Hook

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

const ExampleComponent: FC<Props> = () => {
  const { keyInfo } = useKeyboardKey(onKeyDownCallback);

  const onKeyDownCallback = (e: KeyboardEvent) => {
    e.preventDefault
  };

  return (
    <div>
      {keyInfo.code}
    </div>
  );
};

Sources