/reactuse

useKeyboard

Registers keydown/keyup listeners on a target.

Usage

import { useKeyboard } from "@siberiacancode/reactuse";

const keyboardRef = useKeyboard<HTMLInputElement>((event) =>
  console.log(event.key)
);
// or
useKeyboard(ref, (event) => console.log(event.key));

Example

import { useKeyboard } from "@siberiacancode/reactuse";

export const SearchInput = () => {
  const keyboardRef = useKeyboard<HTMLInputElement>({
    onKeyDown: (event) => console.log(event.key),
  });

  return <input ref={keyboardRef} placeholder="Type..." />;
};

onKeyDown:

Keydown handler.

useKeyboard<HTMLInputElement>({ onKeyDown: (event) => console.log(event.key) });

onKeyUp:

Keyup handler.

useKeyboard<HTMLInputElement>({ onKeyUp: (event) => console.log(event.key) });

Type Declarations

import type { HookTarget } from "@siberiacancode/reactuse";
import type { StateRef } from "@siberiacancode/reactuse";

export type KeyboardEventHandler = (event: KeyboardEvent) => void;
export interface UseKeyboardEventOptions {
  onKeyDown?: KeyboardEventHandler;
  onKeyUp?: KeyboardEventHandler;
}
export interface UseKeyboard {
  (target: HookTarget, callback: KeyboardEventHandler): void;
  (target: HookTarget, options: UseKeyboardEventOptions): void;
  <Target extends HTMLElement>(
    callback: KeyboardEventHandler,
    target?: never
  ): StateRef<Target>;
  <Target extends HTMLElement>(
    options: UseKeyboardEventOptions,
    target?: never
  ): StateRef<Target>;
}
export declare const useKeyboard: UseKeyboard;