1.2.0 • Published 3 months ago
react-ripple-click v1.2.0
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;
}