Inferno Component to make Google material design ripple effect. It's adopted from react-ripple
Just clone or download this repository and run example
git clone https://github.com/LexRiver/inferno-ripple-effect.git
cd inferno-ripple-effect
npm install
npm startthen open localhost:8080 in your browser
No npm installation yet, just copy RippleButton.tsx, RippleEffect.css, RippleEffect.tsx to your project and modify them as you need. If you are using jsx, just rename the tsx files and remove interfaces.
<RippleButton onClick={myEvent}>My ripple button</RippleButton>See detailed example
Please see RippleButton example to create your own component with ripple effect.
The most important steps:
- add RippleEffect child component to your component
<div...>
<RippleEffect cursorPos={this.state.cursorPos} duration={500} color={'rgba(0,0,0,0.2)'} />
</div>- set style of your component to
position: relative; overflow: hidden, position can't bestatic - on click event update cursorPos like this
handleClick = (e) => {
// Get Cursor Position
let cursorPos = {
top: e.clientY,
left: e.clientX,
time: Date.now()
}
this.setState({ cursorPos: cursorPos })
}