Module @react-md/states

useInteractionStates

• useInteractionStates<E>(options?: InteractionStatesOptions<E>): ReturnValue<E>

• This is probably one of the most useful hook in react-md. Any functional component component that uses this will gain all the different interaction states based on the states context or any custom overrides.

  The main interaction state is the "ripple" effect when an element has been clicked either via keyboard, mouse, or touch.

  If the ripple effect is disabled, it will fallback to "polyfilling"/fixing the :pressed pseudo-selector state for items so that a different background-color opacity is applied instead of the entire ripple effect. This is polyfilled since the :pressed state does not work on anything other than buttons and links by default and it is not triggered on "valid" keyboard clicks with a spacebar.

  Finally, the element that uses this hook will gain a focused className whenever it gains keyboard focus only.

  To get all these interaction states to work correctly, this hook returns an object containing:

  • handlers- an object of event handlers that must be passed down to your component to get the different interaction states. All the event handlers are automatically merged with any handlers that are provided to this hook so they can all be called if needed.
  • className - the current class name for the element
  • ripples - a renderable element that displays the ripple effects. This will be null when ripples are disabled.

  Type parameters

  • E: HTMLElement = HTMLElement

    The element type for the component being wrapped. This is really just used to "better type" the event handlers.

  Parameters

  • options: InteractionStatesOptions<E> = {}

  Returns ReturnValue<E>