Create ripple effect from Material Design with React

简体中文 Simplified Chinese

npm install react-touch-ripple --save

import Ripples from 'react-touch-ripple';

const Demo = () => (
    <Ripples>
        <button>CLICK</button>
    </Ripples>
);
ReactDOM.render(<Demos />, tree);

A quick note here: <Ripples> is a box wrapping around its child component (in this case, <button>) and if you are adding styles such as box-shadow or margin, make sure you apply them directly to the wrapper component instead of the child component.

const StyledWrapperDemo = () => (
    <Ripples 
        className="deep-shadow"
        style={{ margin: '10px 0', }}
    >
        <button>CLICK</button>
    </Ripples>
);

The background-color of the ripples are default to currentColor. If you are to change it, pass it as a prop to <Ripples>.

const ColoredDemo = () => (
    <Ripples color="#00a1e9">
        <button>CLICK</button>
    </Ripples>
);

An important note: opacity: 0.3 is already set on the ripples. So you just need to pass in the color without an alpha.

<Ripples color="rgba(0, 109, 37, 0.5)">

This is UNNESSARY and will behave out of your expectation.

Provide center property on the <Ripples> will center every ripple it created. This is usually useful when you are applying ripples on a switch or checkbox component. See demos for more information.

const RippleSwitch = () => (
    <Ripples center>
        <Switch />
    </Ripples>
);

See Choreography

React Touch Ripple is licensed as MIT