1.1.3 • Published 1 year ago
@chaocore/ripple v1.1.3
@chaocore/ripple
The very easy, performance and flexible to use JavaScript/TypeScript library for creating a ripple effect.
Demonstration
Installing
Using npm:
npm i @chaocore/rippleUsing yarn:
yarn add @chaocore/rippleUsing pnpm:
pnpm add @chaocore/rippleUsing CDN:
<script src="https://unpkg.com/@chaocore/ripple"></script>or
<script defer src="https://unpkg.com/@chaocore/ripple"></script>Usage
React
import { useRipple } from "@chaocore/ripple";
function MyComponent() {
const ripple = useRipple(options);
return <button ref={ripple} className="btn">Click Here</button>
}Native js
const btn = document.querySelector(".btn");
btn.addEventListener("pointerdown", (event) => {
createRippleEffect(event, btn, options) // or window.createRippleEffect
})Options
| Name | Default | Type |
|---|---|---|
| color | "currentColor" | string |
| easing | "ease-out" | string |
| duration | 400ms | number |
| dissolveDuration | 300ms | number |
| delay | 75ms | number |
| initialOpacity | 0.2 | number |
| finalOpacity | 0.1 | number |
| considerDisabledAttr | true | boolean |
| turnOff | false | boolean |
Description of options
| Name | Description |
|---|---|
| color | Defines the color of the ripple. |
| easing | Any valid CSS transition-timing-function. |
| duration | The duration of the ripple in milliseconds. |
| dissolveDuration | The dissolve duration of the ripple in milliseconds.Starts after the end of the main duration. |
| delay | The animation delay in milliseconds during which the animation maybe canceled if the current pointer action is interrupted for some reason and pointer events are no longer generated.Read about the pointercancel event |
| initialOpacity | The opacity of the ripple at the beginning of the animation. |
| finalOpacity | The opacity of the ripple at the end of the animation. |
| considerDisabledAttr | Don't display a ripple effect if the element has the disabled attribute. |
| turnOff | Don't display a ripple effect. |
License
Copyright © 2024, Alexey Kipichenko. Released under the MIT License.