0.1.0 • Published 3 months ago
@avioui/ripple-effect v0.1.0
- Ripple Effect
Made for those of you who want to make your elements have a Ripple effect
Features:
- Dynamic color ripple
Uses Instructions:
- Install the
@avioui/ripple-effect
from terminal by npm or yarn.
npm i @avioui/ripple-effect
yarn add @avioui/ripple-effect
- Import the
@avioui/ripple-effect
in to your project.
import Ripple from '@avioui/ripple-effect'
@avioui/ripple-effect
Ripple effect works by using events on elements. You need to initialize the Ripple() object first then use the add() method to get the ripple effect on the component.
import React from 'react'
import Ripple from '@avioui/ripple-effect'
function Example() {
const ripple = new Ripple()
return (
<>
<button onMouseUp={(e) => ripple.add(e)}>
example ripple
</button>
</>
);
}
export default Example
0.1.0
3 months ago