React Ripple
React Component to Make Google Material Design Ripple Effect. It's adopted from angular-ripple
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
;; ; Component { return <RippleButton>Click On Me!</RippleButton> } ReactDOM
Usage Standalone Ripple Component
; ; Component { super; thisstate = cursorPos: {} } { return <button className="Ripple-parent" onMouseUp= thishandleClick onTouchend= thishandleClick > thispropschildren <Ripple cursorPos= thisstatecursorPos /> </button> } { // Get Cursor Position let cursorPos = top: eclientY left: eclientX // Prevent Component duplicates do ripple effect at the same time time: Date this } ;
Props
cursorPos (Object)
You need to describe the cursor position ( when parent is clicked ) with the structure like the object bellow
let cursorPos = top: eclientY left: eclientX // Prevent Component duplicates do ripple effect at the same time time: Date
Thank You for Making this useful~
Let's talk about some projects with me
Just Contact Me At:
- Email: bosnaufalemail@gmail.com
- Skype Id: bosnaufal254
- twitter: @BosNaufal
License
MIT Copyright (c) 2016 - forever Naufal Rabbani