useModality

Respond to changes in the user’s interaction mode.

Reflects the modality that is currently active: keyboard, mouse, touch, pen. The value of modality corresponds to the modality that is being used at any given point in time, whereas activeModality corresponds to the last modality that was used to perform an interaction. For example: activeModality is updated when a key is pressed, when a mouse button is pressed, and when the screen is touched; whereas modality is also updated when a mouse or pointer is moved even if a mouse button is not being pressed.

import { useModality } from 'react-gui/use-modality';

const { activeModality, modality } = useModality();

API #

Return value #

useModality returns an object with the following properties.

activeModality null | "keyboard" | "mouse" | "touch" | "pen"

The modality last used to actively interact with the application (i.e., pointer down, keyboard).

modality null | "keyboard" | "mouse" | "touch" | "pen"

The modality last used.


Examples #

Use activeModality to determine whether focus should be made visible, given the modality:

function useFocusVisibleState() {
const { activeModality, modality } = useModality();
return activeModality === 'keyboard';
}
Updated
Edit
React GUICopyright © Facebook Inc.