React ripple click

Ripple effect for your buttons. Try interactive CodeSandbox demo or Storybook demo.

Installation

npm install react-ripple-click

How to use

import { Ripple } from 'react-ripple-click'
import 'react-ripple-click/dist/index.css'

const App = () => {
	return (
		<button
			style={{
				position: 'relative',
				overflow: 'hidden',
				isolation: 'isolate',
			}}
		>
			<Ripple />
			Click me
		</button>
	)
}

Custom overrides

Put to any parent element the following CSS custom properties to override the default ripple effect:

:root {
	--Ripple-custom-opacity: 0.2;
	--Ripple-custom-duration: 0.6s;
	--Ripple-custom-timing-function: ease-in;
	--Ripple-custom-color: currentColor;
}