"use client" import React, { MouseEvent, useEffect, useState } from "react" import { cn } from "@/lib/utils" interface RippleButtonProps extends React.ButtonHTMLAttributes { rippleColor?: string duration?: string } export const RippleButton = React.forwardRef< HTMLButtonElement, RippleButtonProps >( ( { className, children, rippleColor = "#ffffff", duration = "600ms", onClick, ...props }, ref ) => { const [buttonRipples, setButtonRipples] = useState< Array<{ x: number; y: number; size: number; key: number }> >([]) const handleClick = (event: MouseEvent) => { createRipple(event) onClick?.(event) } const createRipple = (event: MouseEvent) => { const button = event.currentTarget const rect = button.getBoundingClientRect() const size = Math.max(rect.width, rect.height) const x = event.clientX - rect.left - size / 2 const y = event.clientY - rect.top - size / 2 const newRipple = { x, y, size, key: Date.now() } setButtonRipples((prevRipples) => [...prevRipples, newRipple]) } useEffect(() => { let timeout: ReturnType | null = null if (buttonRipples.length > 0) { const lastRipple = buttonRipples[buttonRipples.length - 1] timeout = setTimeout(() => { setButtonRipples((prevRipples) => prevRipples.filter((ripple) => ripple.key !== lastRipple.key) ) }, parseInt(duration)) } return () => { if (timeout !== null) { clearTimeout(timeout) } } }, [buttonRipples, duration]) return ( ) } ) RippleButton.displayName = "RippleButton"

Ripple Button

Instalação