React Ripple

A React version of an MDC Ripple.

Installation

``npm install @material/react-ripple`

`Usage`

`$3`

with Sass:`js import '@material/react-ripple/index.scss';`

You'll also need to include these sass mixins on the element. Please also refer to Advanced Sass Mixins to customize further.

`sass @import "@material/ripple/mdc-ripple.scss";

// refer to element in Javascript portion below .ripple-icon-component { @include mdc-ripple-surface; @include mdc-ripple-radius-bounded; @include mdc-states; overflow: hidden; }`

with CSS:`js import '@material/react-ripple/dist/ripple.css';`

`$3`

To wrap a component with the ripple HOC, please follow this example:

`js import {withRipple} from '@material/react-ripple';

const Icon = (props) => { const { children, className = '', // You must callinitRipplefrom the root element's ref. This attaches the ripple // to the element. initRipple, // includeunbounded to remove warnings when passing otherPropsto the // root element. unbounded, ...otherProps } = props;

// any classes needed on your component needs to be merged with //className passed from props. const classes =ripple-icon-component ${className};

return ( className={classes} ref={initRipple} {...otherProps}> {children}

Wrap your Icon component with the HOC withRipple

, which returns a component
with a ripple capable surface.

$3

interface IconProps extends InjectedProps {
  children?: React.ReactNode;
  className: string;
  initRipple: React.Ref;
  unbounded: boolean;
}

const Icon = (props) => {
  const {
    children,
    className = '',
    // You must call

initRipple

 from the root element's ref. This attaches the ripple
    // to the element.
    initRipple,
    // include

unbounded to remove warnings when passing otherProps

 to the
    // root element.
    unbounded,
    ...otherProps
  } = props;

  // any classes needed on your component needs to be merged with
  //

className passed from props

.
  const classes =

ripple-icon-component ${className};

Advanced Usage

$3

You may want to apply the visual treatment (CSS classes and styles) for a ripple surface on one element, but have its activation rely on a different element. For example, putting a ripple on a

which will be activated by focusing on a child element. We call the visual element the "ripple surface" and the activating element the "ripple activator".

The initRipple callback prop can take in an extra activator argument for the case where the ripple activator differs from the ripple surface. If the activator argument is not provided, the ripple surface will also serve as the ripple activator.

`js import {withRipple} from '@material/react-ripple';

const MyInput = (props) => { const { rippleActivator, ...otherProps } = props;

return ( ); }

class MyComponent extends React.Component { rippleActivator = React.createRef();

init = (el) => { this.props.initRipple(el / surface /, this.rippleActivator.current / activator /); }

render() { const { className, initRipple, unbounded, ...otherProps } = this.props;

return ( className={my-component ${className}} ref={this.init} {...otherProps}>

);
}
};

const MyRippledComponent = withRipple(MyComponent);