Skip to content

The very easy, performance and flexible to use JavaScript/TypeScript library for creating a ripple effect.

License

Notifications You must be signed in to change notification settings

Kipicenko/chaocore-ripple

Repository files navigation

@chaocore/ripple

The very easy, performance and flexible to use JavaScript/TypeScript library for creating a ripple effect.

Demonstration

Demonstration library

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.