Create ripple effect from Material Design with React

Downloads in past


29240.2.15 years ago5 years agoMinified + gzip package size for react-touch-ripple in KB


React Touch Ripple
Create ripple effect from Material Design with React Build Status GitHub license npm 简体中文 Simplified Chinese


```bash npm install react-touch-ripple --save ```


Basic Usage

```jsx import Ripples from 'react-touch-ripples'; const Demo = () => (
); ReactDOM.render(, 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 as box-shadow or margin, make sure you apply them directly to the wrapper component instead of the child component. ```jsx const StyledWrapperDemo = () => (
style={{ margin: '10px 0', }}
); ```

Changing Color

The background-color of the ripples are default to currentColor. If you are to change it, pass it as a prop to <Ripples>. ```jsx const ColoredDemo = () => (
<Ripples color="#00a1e9">
); ``` An important note: opacity: 0.3 is already set on the ripples. So you just need to pass in the color without an alpha. ```jsx ``` This is UNNESSARY and will behave out of your expectation.

Center Ripples

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. ```jsx const RippleSwitch = () => (
<Ripples center>
<Switch />
); ```

Design Guidelines

See Choreography


React Touch Ripple is licensed as MIT