material-ripple-effects makes you able to have Material Design Ripple Effect on any element you want.
npm i material-ripple-effects
yarn add material-ripple-effects
import Ripple from 'material-ripple-effects';
import React from "react";
import Ripple from 'material-ripple-effects';
export default function Button() {
const ripple = new Ripple();
return (
<>
<button onMouseUp={(e) => ripple.create(e, 'light')>Material Ripple</button>
<button onMouseUp={(e) => ripple.create(e, 'dark')>Material Ripple</button>
</>
);
}
<script crossorigin src="https://unpkg.com/material-ripple-effects/ripple.js"></script>
data-ripple-light
or data-ripple-dark
on the element you want to have material design ripple effect.<button data-ripple-light="true">Material Ripple</button>
<button data-ripple-dark="true">Material Ripple</button>