React Touch Ripple
Create ripple effect from Material Design with React
Install
npm install react-touch-ripple --save
Usage
Basic Usage
import Ripples from 'react-touch-ripples'; const Demo = <Ripples> <button>CLICK</button> </Ripples>;ReactDOM;
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.
const StyledWrapperDemo = <Ripples ="deep-shadow" = > <button>CLICK</button> </Ripples>;
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>
.
const ColoredDemo = <Ripples ="#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 ="rgba(0, 109, 37, 0.5)">
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.
const RippleSwitch = <Ripples > <Switch /> </Ripples>;
Design Guidelines
See Choreography
License
React Touch Ripple is licensed as MIT