useFocusRing

The useFocusRing hook can be used to manage whether a focus ring should be shown around a component that has keyboard focus. This helps keyboard users keep track of what component on the page is currently in focus.

The focus ring is only visible when the component is focused using the keyboard and is not shown (and therefore not a distraction) to mouse and touch screen users.

Usage

To add a focus ring to a component, we need to call the useFocusRing hook and merge the returned classnames and props with the existing classnames and props.

import { useFocusRing } from "@helpscout/ui-kit-react";
import { clsx } from "clsx";

function MyComponent({ className, ...rest }) {
  const { focusProps, focusRingClassnames } = useFocusRing();

  const props = {
    ...rest,
    ...focusProps,
    className: clsx(className, focusRingClassnames),
  };

  return <div {...props}>My Component</div>;
}