react-ripple-effect/src/js/components/react-ripple.js

React Component to Make Google Material Design Ripple Effect

/*! Copyright (c) 2016 Naufal Rabbani (http://github.com/BosNaufal)
	* Licensed Under MIT (http://opensource.org/licenses/MIT)
	*
	* React Ripple - Version 1.0.0
  *
  * Adopted from : https://github.com/nelsoncash/angular-ripple
	*
	*/


import React from 'react';

require('../../sass/_Ripple.sass')

class Ripple extends React.Component {

  constructor() {
    super();
    this.state = {
      animate: false,
      width: 0,
      height: 0,
      top: 0,
      left: 0
    }
  }

  render () {
    return (
      <div className={"Ripple " + (this.state.animate ? "is-reppling" : "")} ref="ripple" style={{
          top: this.state.top+"px",
          left: this.state.left+"px",
          width: this.state.width+"px",
          height: this.state.height+"px"
      }}></div>
    )
  }


  reppling(cursorPos){

    // Get the element
    let $ripple = this.refs.ripple
    let $button = $ripple.parentElement

    let buttonStyle = window.getComputedStyle($button)
    let buttonPos = $button.getBoundingClientRect()

    let buttonWidth = $button.offsetWidth
    let buttonHeight = $button.offsetHeight

    // Make a Square Ripple
    let rippleWidthShouldBe = Math.max(buttonHeight,buttonWidth)

    // Make Ripple Position to be center
    let centerize = rippleWidthShouldBe / 2

    this.setState({
      animate: true,
      width: rippleWidthShouldBe,
      height: rippleWidthShouldBe,
      top: cursorPos.top - buttonPos.top - centerize,
      left: cursorPos.left - buttonPos.left - centerize
    })
  }

  componentWillReceiveProps(nextProps) {
    let cursorPos = nextProps.cursorPos

    // Prevent Component duplicates do ripple effect at the same time
    if(cursorPos.time !== this.props.cursorPos.time){
      // If Has Animated, set state to "false" First
      if(this.state.animate){
        this.setState({ animate: false }, () => {
          this.reppling(cursorPos)
        })
      }
      // else, Do Reppling
      else this.reppling(cursorPos)
    }
  }

}

export default Ripple;