material-ripple-web v0.2.2

Material Ripple Web

Material Ripple Web is a framework agnostic library for adding ripple effects to the web.

• Installation
• Usage
• Theming

Installation

npm

npm install material-ripple-web

import "material-ripple-web/ripple.css";
import { Ripple } from "material-ripple-web";

CDN

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/material-ripple-web@latest/dist/ripple.min.css"
/>

import { Ripple } from "https://cdn.jsdelivr.net/npm/material-ripple-web@latest/dist/index.min.js";

Usage

Place the ripple element in a position: relative container.

<button style="position: relative">
    <div id="ripple"></div>
    <span>Click me</span>
</button>

Import Ripple and attach it to the ripple element.

const ripple = new Ripple(document.getElementById("ripple"));
ripple.attach();

You can remove the attached event listeners by calling the detach method.

ripple.detach();

Options

By default, the ripple listens for events on the parent element. You can override this behavior by passing an element to the attach method.

ripple.attach(target);

You can customize the easing function used for the ripple animation by setting the easing property on the ripple.

ripple.easing = "ease-in-out";

You can disable the ripple by setting the disabled property to true.

ripple.disabled = true;

Theming

Ripples support theming using CSS variables.