# @leafygreen-ui/ripple

> leafyGreen UI Kit Ripple

Latest version **2.0.8** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @leafygreen-ui/ripple
pnpm add @leafygreen-ui/ripple
yarn add @leafygreen-ui/ripple
bun add @leafygreen-ui/ripple
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.0.8 |
| Published | 2026-10-02 |
| First published | 2021-03-15 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 46.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 274 |
| Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck |

## Links

- npm: https://www.npmjs.com/package/@leafygreen-ui/ripple
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/ripple
- Issues: https://jira.mongodb.org/projects/PD/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/ripple

## Dependencies (1)

- [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3

## Recent versions

- 2.0.8 (latest) — 2026-10-02
- 1.1.10 (beta) — 2023-07-26
- 2.0.0-alpha.1 (alpha) — 2023-07-20
- 1.1.4-test.0 (test) — 2022-09-22
- 1.1.4-next.2 (next) — 2022-09-19
- 2.0.7 — 2025-10-31
- 2.0.6 — 2025-09-25
- 2.0.5 — 2025-09-10
- 2.0.4 — 2025-09-03
- 2.0.3 — 2025-07-03
- 2.0.2 — 2025-06-30
- 2.0.1 — 2025-06-16
- 2.0.0 — 2025-05-29
- 1.1.20 — 2025-04-08
- 1.1.19 — 2025-04-02
- … 22 more at https://npm.io/package/@leafygreen-ui/ripple/versions

## README

# Ripple

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/ripple.svg)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/ripple
```

### Yarn

```shell
yarn add @leafygreen-ui/ripple
```

### NPM

```shell
npm install @leafygreen-ui/ripple
```

## Example

```js
import { registerRipple } from '@leafygreen-ui/ripple';

// JavaScript Example
const button = document.querySelector('#my-button');
const buttonOptions = {
  variant: 'danger',
  darkMode: false,
};

registerRipple(button, buttonOptions);

// React Example
function Button({ options }) {
  const ref = React.useRef(null);

  useEffect(() => {
    if (ref.current) {
      registerRipple(ref, options);
    }
  }, [ref, options]);
}
```

## Arguments

| Argument         | Type                                                                | Description                                                   | Default |
| ---------------- | ------------------------------------------------------------------- | ------------------------------------------------------------- | ------- |
| ref              | `HTMLElement`                                                       | HTMLElement that ripple effect should be applied to           |         |
| options          |                                                                     | Options that specify coloring and size of ripple              |         |
| options.variant  | `'primary'`, `'info'`, `'default'`, `'danger'`, `'secondaryDanger'` | Determines color of ripple effect                             |         |
| options.darkMode | `boolean`                                                           | Determines if the ripple effect will be rendered in dark mode | `false` |

_NOTE: In order for this to work as expected, the target element must have the property `overflow:hidden` set_

---
_Source: https://npm.io/package/@leafygreen-ui/ripple · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._