@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/ripple

Using yarn:

yarn add @chaocore/ripple

Using pnpm:

pnpm add @chaocore/ripple

Using 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.