useFocus

React Sensor Hooks that tracks element foucs state

useFocus tracks and controls the focus state of a specific DOM element. It returns a tuple of [isFocused, setFocused] — a boolean indicating whether the element currently has focus, and a function to programmatically focus or blur it. You can optionally pass true as the second argument to auto-focus the element on mount.

When to Use

Building accessible form components that need to track and programmatically control focus
Implementing focus management in modal dialogs, wizards, or multi-step forms
Creating focus indicators or visual feedback that responds to focus state changes

Notes

Two-way binding: The returned setter calls element.focus() or element.blur() under the hood, so the DOM and React state stay in sync.
Initial focus: Pass true as the initialValue parameter to focus the element immediately after mount.
See also useActiveElement for tracking which element has focus globally across the entire document.

Usage

Live Editor

function Demo() {
  const text = useRef<HTMLParagraphElement>(null);
  const input = useRef<HTMLInputElement>(null);
  const button = useRef<HTMLButtonElement>(null);

  const [paragraphFocus, setParagraphFocus] = useFocus(text);
  const [inputFocus, setInputFocus] = useFocus(input, true);
  const [buttonFocus, setButtonFocus] = useFocus(button);
  return (
    <div>
      <p ref={text} style={paragraphFocus ? { opacity: 0.5 } : {}} tabIndex={0}>
        Paragraph that can be focused
      </p>
      <input ref={input} placeholder="Input that can be focused" />
      <br />
      <br />
      <button ref={button} style={buttonFocus ? { opacity: 0.5 } : {}}>
        Button that can be focused
      </button>
      <br />
      <br />
      <hr />
      <p style={{ height: "2rem" }}>
        {paragraphFocus && "The paragraph has focus"}
        {inputFocus && "The input control has focus"}
        {buttonFocus && "The button has focus"}
      </p>
      <div>
        <button
          onClick={() => {
            setParagraphFocus(!paragraphFocus);
          }}
        >
          Focus text
        </button>
        <button
          onClick={() => {
            setInputFocus(!inputFocus);
          }}
        >
          Focus input
        </button>
        <button
          onClick={() => {
            setButtonFocus(!buttonFocus);
          }}
        >
          Focus button
        </button>
      </div>
    </div>
  );
};

Result

API

useFocus

Returns

readonly [boolean, (value: boolean) => void]: A tuple with the following elements:

whether the element focus.
A function to update focus state.

Arguments

Argument	Description	Type	DefaultValue
target	dom element	BasicTarget<HTMLElement \| SVGElement> (Required)	-
initialValue	defaultValue	boolean \| undefined	`false`

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;