The @react-md/states package will probably not be used much from a developer standpoint all the react-md components that are interactable will already hook into this API. You'll really only need to use this package for initial state configuration or if you want to make your own custom component since react-md is lacking a feature you need.

Every app will want to import the StatesConfig component and initialize it near the root of your app so that you can track the current "user interaction mode" and apply styles as needed for that.

123456789101112import React from "react";
import { render } from "react-dom";
import { StatesConfig } from "@react-md/states";

import App from "./App";

render(
  <StatesConfig>
    <App />
  </StatesConfig>,
  document.getElementById("root")
);

Since this isn't very exciting to see as a demo, I'll update it a little bit to include a Button from @react-md/button to show the built in states. The default state types are:

• keyboard focus only
• pressed via mouse, touch, or keyboard
• hover

The default pressed states will use the material design ripple effect, but this can be disabled and different effects can be used instead. See the example below for more info.

Since some designers or users do not like the ripple effect from material design, there is a fallback option to disable ripples and use normal background color changes instead as a simplified pressed states interaction. You can switch to this feature by either updating the StatesConfig to enable the disableRipple prop which will make all interactable elements from react-md no longer use the ripple effect or provide the disableRipple effect to each interactable element.

If you enable disableRipple on the StatesConfig component, you can set disableRipple={false} to a specific interactable element to enable ripples again only for that element as well.

Since the default interactions might not cover 100% of the use cases, you can use some of the provided mixins to add more custom styles. This package exports the following useful mixins:

• rmd-utils-touch-only - adds styles only when in touch mode
• rmd-utils-mouse-only - adds styles only when in mouse mode
• rmd-utils-keyboard-only - adds styles only when in keyboard mode
• rmd-states-pressed-styles - adds styles only when using the pressed fallback option

To make this example a bit more interesting, I'll update the base button styles so that a flat button will raise elevation on press.

"Fun" fact! The @react-md/button package uses the rmd-states-pressed-styles mixin to add the different box-shadow effects while pressed for the contained button.

Since react-md might not have every component available for every single use case, @react-md/states also provides a React hook: useInteractionStates that allows you to add interaction states to any component. In order to use the hook, you will also need to ensure that your component has position: relative as well as using the rmd-states-surface mixin. The position: relative is so that the different states can be contained within your component and the rmd-states-surface mixin will create the ::before or ::after tag within your component so the different states can be applied.

The example below will show its usage in a custom button implementation.