Ripples

MDC Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material “ink ripple” interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.

• Module @pmwcs/ripple
• Import styles:
  • Using CSS Loader
    • import '@pmwcs/ripple/styles';
  • Or include stylesheets
    • '@material/ripple/dist/mdc.ripple.css'
• MDC Docs: https://material.io/develop/web/components/ripples/

Ripples will wrap whatever child component you pass it and apply the appropriate classes and styles.

<Ripple>
  <p>Standard Ripple</p>
</Ripple>

<Ripple primary>
  <p>Primary</p>
</Ripple>

<Ripple accent>
  <p>Accent</p>
</Ripple>

<Ripple unbounded>
  <p>Unbounded</p>
</Ripple>

Ripple

A component for adding Ripples to other components.

Props

Name	Type	Description
accent	undefined \| false \| true	Makes the ripple an accent color
disabled	undefined \| false \| true	makes the ripple disabled
foundationRef	React.Ref<MDCRippleFoundation>	Advanced: A reference to the MDCFoundation.
primary	undefined \| false \| true	Makes the ripple primary
surface	undefined \| false \| true	For internal use
unbounded	undefined \| false \| true	Makes the ripple unbounded