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];
}
Updated
Edit
React GUICopyright © Facebook Inc.