React Touch Ripple

Create ripple effect from Material Design with React

Giản thể tiếng Trung Simplified Chinese

Install

npm install react-touch-ripple --save

Usage

Basic Usage

importRipplesfrom'react-touch-ripple';

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

Custom Styles

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

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

Changing Color

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

constColoredDemo=()=>(
<Ripplescolor="#00a1e9">
<button>CLICK</button>
</Ripples>
);

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

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

This isUNNESSARYand will behave out of your expectation.

Center Ripples

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

constRippleSwitch=()=>(
<Ripplescenter>
<Switch/>
</Ripples>
);

Design Guidelines

SeeChoreography

License

React Touch Ripple is licensed asMIT