High-performance Ripple Click Effect – chaocore-ripple

chaocore-ripple is a JavaScript/TypeScript library that creates a sleek, high-performance, and highly customizable ripple effect on elements when clicked.

It’s inspired by Google Material Design’s UI interactions and works with React.js and Vanilla JavaScript.

How to use it:

1. Install and download the chaocore-ripple using your preferred package manager.

# Yarn
$ yarn add @chaocore/ripple
# NPM
$ npm install @chaocore/ripple
# PNPM
$ pnpm install @chaocore/ripple

2. Load the library directly from a CDN:

<script defer src="https://unpkg.com/@chaocore/ripple"></script>

3. Apply the ripple effect to the target element.

// Vanilla JavaScript
const element = document.querySelector(".btn");
element.addEventListener("pointerdown", (event) => {
  createRippleEffect(event, element, {
    // options here
  })
})

// Use in React
import { useRipple } from "@chaocore/ripple";
function MyComponent() {
  const ripple = useRipple(options);
  return <button ref={ripple} className="btn">Click Me</button>
}

4. chaocore-ripple offers several options to customize the ripple effect:

/**
 * `Defines the color of the ripple.`
 *
 * @default
 * 'currentColor'
 */
color: string;
/**
 * `Any valid CSS <transition-timing-function>`
 *
 * @default
 * 'ease-out'
 */
easing: string;
/**
 * `The duration of the ripple in milliseconds.`
 *
 * @default
 * 400ms
 */
duration: number;
/**
 * `The dissolve duration of the ripple in milliseconds.
 * Starts after the end of the main duration.`
 *
 * @default
 * 300ms
 */
dissolveDuration: number;
/**
 * `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`
 *
 * @default
 * 75ms
 */
delay: number;
/**
 * `The opacity of the ripple at the beginning of the animation.`
 *
 * @default
 * 0.2
 */
initialOpacity: number;
/**
 * `The opacity of the ripple at the end of the animation.`
 *
 * @default
 * 0.1
 */
finalOpacity: number;
/**
 * `Don't display a ripple effect if the element has the disable attribute.`
 *
 * @default
 * true
 */
considerDisabledAttr: boolean;
/**
 * `Don't display a ripple effect.`
 *
 * @default
 * false
 */
turnOff: boolean;