react-keyboard-key

Container and hook with keyboard event listener.

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>
  );
};

Project

• whatdidipress.com
• Github project whatdidipress.com