react-ripple-effect

React Ripple

React Component to Make Google Material Design Ripple Effect. It's adopted from angular-ripple

DEMO

Install

You can import react-ripple to your react component file like this and process it with your preprocessor.;

You can install it via NPM

npm install react-ripple-effect

Usage

Usage With Predefined Ripple Button

 
import React from 'react';
import ReactDOM from 'react-dom';
 
import { RippleButton } from 'react-ripple-effect';
 
class App extends React.Component {
 
  render(){
    return(
      <RippleButton>Click On Me!</RippleButton>
    )
  }
 
}
 
 
ReactDOM.render(<App />, document.getElementById("app"))
 
 

Usage Standalone Ripple Component

 
import React from 'react';
 
import { Ripple } from 'react-ripple-effect';
 
class RippleButton extends React.Component {
 
  constructor() {
    super();
    this.state = {
      cursorPos: {}
    }
  }
 
  render () {
    return (
      <button
        className="Ripple-parent"
        onMouseUp={ this.handleClick.bind(this) }
        onTouchend={ this.handleClick.bind(this) } >
        { this.props.children }
        <Ripple cursorPos={ this.state.cursorPos } />
      </button>
    )
  }
 
  handleClick(e){
    // Get Cursor Position
    let cursorPos = {
      top: e.clientY,
      left: e.clientX,
      // Prevent Component duplicates do ripple effect at the same time
      time: Date.now()
    }
    this.setState({ cursorPos: cursorPos })
  }
 
}
 
export default RippleButton;

Props

cursorPos (Object)

You need to describe the cursor position ( when parent is clicked ) with the structure like the object bellow

let cursorPos = {
  top: e.clientY,
  left: e.clientX,
  // Prevent Component duplicates do ripple effect at the same time
  time: Date.now()
}

Thank You for Making this useful~

Let's talk about some projects with me

Just Contact Me At:

• Email: [e-mail]
• Skype Id: bosnaufal254
• twitter: @BosNaufal

License

MIT Copyright (c) 2016 - forever Naufal Rabbani