useKeyboardMode

import { useKeyboardMode } from "reshaped";

useKeyboardMode is used internally to enable the focus outline only when users are using their keyboard and not show them when mouse is used. It's quite similar to :focus-visible but also handles a few edge cases that are common to product development.

However, some applications need more granular control to how focus rings are shown. For example, you're building a canvas-based application with additional controls rendered on top of it. Such products would prefer not showing the focus outline by default, like when using the keyboard as a shortcut. When any panels are rendered on top of the canvas and users are interacting with the keyboard – that's product needs to enable the outlines again.

useKeyboard mode gives you control over completely disabling and enabling back the focus rings handling and also programmatically activate and deactivate the focus ring on the current element. Let's look at a simple component composition that manages the focus rings this way:

const Canvas = () => {
  const keyboardMode = useKeyboardMode();

  useEffect(() => {
    keyboardMode.disable();
  }, [keyboardMode]);
};

const Panel = () => {
  const keyboardMode = useKeyboardMode();

  const handleOpen = () => {
    keyboardMode.enable();
    keyboardMode.activate();
  };

  const handleClose = () => {
    keyboardMode.deactivate();
    keyboardMode.disable();
  };
};

() => {
  // Set the keyboard mode state to true
  activate: () => void;

  // Set the keyboard mode state to false
  deactivate: () => void;

  // Start ignoring the keyboard mode and never show the focus ring
  disable: () => void;

  // Stop ignoring the keyboard mode
  enable: () => void;
}