Ripple.jsx

import React, { Component } from 'react';
import { TransitionMotion, spring } from 'react-motion';

const leavingSpringConfig = { stiffness: 60, damping: 15 };
export default class Ripple extends Component {
  constructor(props) {
    super(props);

    this.state = {
      mouse: [],
      now: 't' + 0,
    }
  }
  setRipple = (pageX, pageY) => {
    this.setState({
        position: [pageX, pageY],
        now: 't' + Date.now()         
    })
  };
  handleMouseDown = ({pageX, pageY, }) => {

    this.setState(() => {
        return {
          mouse: [pageX, pageY],
          now: 't' + Date.now(),
        }
    });
  };

  handleMouseUp = () => {
    this.setState({
      mouse: []
    })
  };
  willLeave = (styleCell) => {
    return {
      ...styleCell.style,
      opacity: spring(0, leavingSpringConfig),
      scale: spring(2, leavingSpringConfig)
    }
  };

  shouldComponentUpdate = (nextProps, nextState) => {
    console.log('this is next state', nextState);
    return this.state.mouse !== nextState.mouse
  };

  render() {
    const { mouse: [mouseX, mouseY], now} = this.state;
    const styles = mouseX == null ? [] : [{
      key: now,
      style: {
        x: mouseX,
        y: mouseY,
        opacity: spring(1),
        scale: spring(0)
      }
    }];
    return (
      <TransitionMotion willLeave={this.willLeave} styles={styles}>
      { circles =>
        <div
          onMouseDown={this.handleMouseDown}
          onMouseUp={this.handleMouseUp}
          style={{ backgroundColor: '#1b1b1b', position: 'absolute', width: '100%', height: '100%'}}>
          {circles.map(({ key, style: { opacity, scale, x, y }}) =>
            <div
              key={key}
              style={Object.assign({},ripple, {
                                  opacity: opacity,
                                  scale: scale,
                                  transform: `translate(-50%, -50%) translate3d(${x}px, ${y}px, 0) scale(${scale}`,
                                  WebkitTransform: `translate(-50%, -50%) translate3d(${x}px, ${y}px, 0) scale(${scale}`

              })} />
          )}
          </div>
      }
    </TransitionMotion>
    );
  }
};

const ripple = {
  width: '450px',
  height: '450px',
  borderRadius: '50%',
  backgroundColor: '#FFF',
  position: 'absolute',

}