useOnStartTyping

About

useOnStartTyping listens for document-level keydown events and detects the start of ordinary typing outside inputs, textareas, and contenteditable elements. It is useful for focusing a search box when a user begins typing.

Example

import { useRef, useState } from "react";
import { useOnStartTyping } from "rooks";

export default function TypeToSearch() {
  const inputRef = useRef<HTMLInputElement>(null);
  const [startedWith, setStartedWith] = useState("");

  useOnStartTyping((event) => {
    setStartedWith(event.key);
    inputRef.current?.focus();
  });

  return (
    <label>
      Search
      <input ref={inputRef} />
      <span>Started with: {startedWith || "nothing yet"}</span>
    </label>
  );
}

Parameters

callback(event): receives the matching native KeyboardEvent.
options.includeAZ: permits one-character ASCII letters; defaults to true.
options.includeNumbers: permits one-character ASCII digits; defaults to false.

The source module declares UseOnStartTypingOptions, but the rooks entrypoint does not re-export that type. Use inline object inference.

Return value

The hook returns void.

Behavior and lifecycle

Events with Meta, Control, or Alt held are ignored. The hook also ignores events while an INPUT, TEXTAREA, or element with a contenteditable attribute is focused. Other controls, including SELECT, are not classified as editable by this implementation. It installs one document keydown listener, calls the latest callback, and removes the listener on unmount or option changes.

Compatibility and accessibility

The listener is browser-only and does nothing during server rendering. Automatically moving focus can surprise keyboard and assistive-technology users; keep the destination labeled and avoid stealing focus during modified shortcuts or active editing.

useKey listens for named keys and event types.