react-keyboard-key
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.6 • Public • Published

    npm NPM NPM

    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

    Dependents (0)

    Install

    npm i react-keyboard-key

    DownloadsWeekly Downloads

    1

    Version

    2.0.6

    License

    MIT

    Unpacked Size

    10.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • patrikmasso