• Public
  • Public/Protected
  • All

Module @react-md/states



DEFAULT_RIPPLE_CLASSNAMES: Readonly<CSSTransitionClassNames> = ...
DEFAULT_RIPPLE_TIMEOUT: Readonly<TransitionTimeout> = ...
StatesConfigContext: Context<StatesConfigContextType> = ...


  • The StatesConfig component is a top-level context provider for the states context configuration. It'll keep track of:

    • the current interaction mode of your user
    • configuration for ripple effects
    • disabling or enabling the ripple effects
    • disabling or enabling the fix for color pollution


    Returns ReactElement

  • 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.


    Returns ReturnValue<E>

  • A simple hook that can be used to get the Ripple context. This is used behind the scenes for the Ripple component and probably shouldn't be used anywhere else. It's mostly used to just use the context defaults when the timeout or classNames are undefined.

    Returns StatesConfigContextType

Generated using TypeDoc