User Interaction Mode Provider

The UserInteractionModeProvider is used to determine if the user is interacting with the app via mouse, keyboard, or touch. This is mostly an internal context provider to enable the keyboard movement behavior, tooltips, menus, sliders, and draggable elements.

This is included in the CoreProviders and should normally be used instead.

Only once instance of the UserInteractionModeProvider can be mounted in the app or else an error will be thrown.

Detecting User Interaction Mode

Once the provider has been initialized, the interaction mode can be determined by using the useUserInteractionMode hook.

The current interaction mode is "mouse".

import { useUserInteractionMode } from "@react-md/core/interaction/UserInteractionModeProvider";
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function DetectingUserInteractionModeExample(): ReactElement {
  const mode = useUserInteractionMode();

  return (
    <Typography>{`The current interaction mode is "${mode}".`}</Typography>
  );
}

import { useUserInteractionMode } from "@react-md/core/interaction/UserInteractionModeProvider";
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function DetectingUserInteractionModeExample(): ReactElement {
  const mode = useUserInteractionMode();

  return (
    <Typography>{`The current interaction mode is "${mode}".`}</Typography>
  );
}