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.
The modality last used to actively interact with the application (i.e., pointer down, keyboard).
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';
}