Inspired by Material Design ripple effect.

Designed to be framework agnostic and work w/ modern SPA where state of app could be changed dynamically over time, so ripple options also will change.

npm i data-ripple

After importing module, declarative approach will find and init all elements w/ data-ripple attribute

import 'data-ripple';

<button data-ripple>Click me</button>
<div data-ripple>Click me</div>
<span data-ripple>Click me</span>

import { rippleEffect, Ripple } from 'data-ripple';

...

const ripple = document.querySelector('#ripple');
new Ripple(ripple, { ... });

function handleMouseDown(e) {
  rippleEffect(e);
}

...

<button id="ripple">Click me</button>

<div onmousedown="handleMouseDown(event)">Click me</div>

This project is licensed under the terms of the MIT license.