app.js

import React, { Component } from 'react';


export default class App extends Component {
  constructor() {
    super();

    this.state = {
      animating: false,
      visible: false,
      height: 0,
      width: 0,
      rippleSize: 0,
      x: 0,
      y: 0,
      rippleAnimation: ''
    }
  }
  componentDidMount = () => {
    let rect = this.refs.element.getBoundingClientRect();
    let size = Math.sqrt(rect.width * rect.width + rect.height * rect.height) * 2 + 2;

    this.setState(Object.assign({}, this.state, { height: rect.height, width: rect.width, rippleSize: size }))
  };

  handleMouseDown = (event) => {
    let bound = event.currentTarget.getBoundingClientRect();
    let x = event.nativeEvent.offsetX
    let y = event.nativeEvent.offsetY
    this.setRippleXY(x,y);
    this.setRippleStyles(true);
    console.log(x,y)
    console.log('clicked mouse')
    this.setState({ visible: true })

  };
  setRippleXY = (newX, newY) => {
    this.setState({ x: newX, y: newY });
  };

  setRippleStyles = (start) => {
    let scale;
    let size;
    let offset = `translate(${this.state.x}px, ${this.state.y}px)`;

    if (start) {
      scale = 'scale(0.0001, 0.0001)';
      size = '1px';
      this.setState({ width: size, height: size});
    } else {
      scale = '';
      size = this.state.rippleSize;
      this.setState({ width: `${size}px`, height: `${size}` });
    }
    let transformString = `translate(-50%, -50%) ${offset} ${scale}`;
    if (start) {
      this.setState({ animating: true });
    } else {
      this.setState({ animating: false });
    }
    this.setState({ rippleAnimation: transformString });
  };
  handleMouseUp = () => {
    this.setRippleStyles(false);
    setTimeout( () => {

    this.setState({ visible: false })
    }, 300)

  };

  render() {
    const { start, visible, end, animating, width, height, rippleAnimation, rippleSize } = this.state;
    return (
      <div ref="element" 
           style={{ backgroundColor: 'red', width: '150px', height: '150px', overflow: 'hidden', display: 'block', left: '600px', top: '200px', position: 'absolute' }}
           onMouseDown={this.handleMouseDown}
           onMouseUp={this.handleMouseUp}
      >
        <span style={rippleWrapper}>
          <span style={Object.assign({},ripple,  
            animating ? { width: width, height: height} : { width: rippleSize, height: rippleSize },
            { transform: rippleAnimation },
            visible ? { opacity: '0.3' } : { opacity: '0' }
           )} />
        </span>
      </div>
    );
  }
}
const rippleWrapper = {
  display: 'block',
  height: '100%',
  left: '0',
  position: 'absolute',
  top: '0',
  width: '100%',
  zIndex: '1',
  overflow: 'hidden',
  backgroundColor: 'transparent'

}
const ripple = {
  background: 'rgb(0,0,0)',
  borderRadius: '50%',
  height: '50px',
  opacity: '0',
  pointerEvents: 'none',
  position: 'absolute',
  WebkitTransform: 'translate(-50%, -50%)',
  transform: 'translate(-50%, -50%)',
  width: '50px',
  overflow: 'hidden',
  top: '0',
  left: '0',
  transition: '-webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1)',
  WebkitTransition: '-webkit-transform 0.3s cubic-bezier(0, 0, 0.2, 1), width 0.3s cubic-bezier(0, 0, 0.2, 1), height 0.3s cubic-bezier(0, 0, 0.2, 1), opacity 0.6s cubic-bezier(0, 0, 0.2, 1)',

}