React Component to Make Google Material Design Ripple Effect. It's adopted from angular-ripple
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 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;
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()
}
Just Contact Me At:
MIT Copyright (c) 2016 - forever Naufal Rabbani