StatesConfig component is a top-level context provider for the states
context configuration. It'll keep track of:
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
: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
handlersthat 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
nullwhen ripples are disabled.
The element type for the component being wrapped. This is really just used to "better type" the event handlers.
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.
Generated using TypeDoc