ripple-anything.js

Add click ripple effect to any HTMLElement

just like material ui ripple, easy use, all browser supported, TypeScript supported

play on stackblitz

Demo

Usage

html

<script src="./dist/index.js"></script>
<div onclick="rippleAnything(event)">i am a button</div>

react

import rippleAnything from "./index";

const Com = () => <div
    onclick={(e) => {
        e.persist() // maybe need do this
        rippleAnything(e as unknown as MouseEvent)
    }}>
    i am a button
</div>

angular

<div (click)="rippleAnything($event)">i am a button</div>

vue

<template>
  <div @click="rippleAnything">i am a button</div>
</template>
<script>
import rippleAnything from "ripple-anything";

export default {
  methods: {
    rippleAnything
  }
}
</script>