@jay-js/ui/components/RippleEffect/RippleEffect.js

A library of UI components for Jay JS with Tailwind CSS and daisyUI.

import "./RippleEffect.style.css";
import { Base } from "../Base/Base.js";
export function RippleEffect(event) {
    if ("layerX" in event && "layerY" in event) {
        const x = event.layerX;
        const y = event.layerY;
        const circle = Base({
            tag: "span",
            className: "ripple-effect",
            style: {
                top: `${y}px`,
                left: `${x}px`
            }
        });
        const timeoutId = setTimeout(()=>{
            circle.remove();
        }, 280);
        return circle;
    }
    console.warn("RippleEffect: invalid event");
    return Base({
        tag: "span"
    });
}