index.tsx

function onRippleClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
        var rect = event.currentTarget.getBoundingClientRect();

        const d = Math.max(event.currentTarget.clientWidth, event.currentTarget.clientHeight);
        const left = event.clientX - rect.left - d/2 + 'px';
        const top = event.clientY - rect.top - d/2 + 'px';
        const rippleElement = newRippleElement(d, left, top);

        setRippleElements([...rippleElements, rippleElement]);
    }

    function newRippleElement(d: number, left: string, top: string) {
        const key = uuid();

        return (
            <div
                key={key}
                className="ripple"
                style={{width: d, height: d, left, top}}
                onAnimationEnd={() => onAnimationEnd(key)}
            >
            </div>
        );
    }