0.1.0 • Published 2 years 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-effectfrom terminal by npm or yarn.
npm i @avioui/ripple-effect
yarn add @avioui/ripple-effect- Import the
@avioui/ripple-effectin to your project.
import Ripple from '@avioui/ripple-effect'@avioui/ripple-effectRipple 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 Example0.1.0
2 years ago