useFocusVisibility
Respond to changes in the global visibility of focus.
This information is similar to the CSS :focus-visible
pseudo-class, and is typically used to know when keyboard interactions should result in a focus ring, tooltips, etc. If a pointer (i.e. mouse or touch) is used, focus is not visible.
import { useFocusVisibility } from 'react-gui/use-focus-visibility';
const isFocusVisible = useFocusVisibility();
API #
Return value #
useFocusVisibility
returns a boolean value that indicates whether focus is visible.
isFocusVisible boolean
A boolean representing the focus visibility state, i.e., focus while a keyboard is in use.
Examples #
Use this hook in combination with useFocus
or useFocusWithin
to determine whether focus is visible for a specific element, or ancestor of a focused element.
import useFocus from 'react-gui/use-focus';
import useFocusVisibility from 'react-gui/use-focus-visibility';
function useFocusVisibleState() {
const [isFocused, onFocusChange] = React.useState(false);
const isFocusVisible = useFocusVisibility();
const ref = useFocus({ onFocusChange });
const isElementFocusVisible = isFocused && isFocusVisible;
return [ref, isElementFocusVisible];
}