@rocket2mars/react-ripple-effect

A lightweight, zero-dependency ripple effect library for React. No wrapper components needed - just add data attributes!

Features

- No wrapper components - Use regular elements with data attributes
- Zero dependencies - Pure TypeScript implementation
- Highly customizable - Control color, duration, radius, and position via data attributes
- Lightweight - Minimal bundle size
- TypeScript support - Full type definitions included
- Touch-friendly - Works with both mouse and touch events

Installation

``bash
npm install @rocket2mars/react-ripple-effect
`

Quick Start

$3

`tsx
import { useRippleEffect } from "@rocket2mars/react-ripple-effect";
import "@rocket2mars/react-ripple-effect/dist/styles.css";

function App() {
useRippleEffect();

return (
className="ripple-host"
data-ripple-color="rgba(255,255,255,0.3)"
data-ripple-duration="0.45"
data-ripple-max-radius="160"
>
Click me



);
}
`

$3

`tsx
import { useEffect } from "react";
import { initRippleEffect } from "@rocket2mars/react-ripple-effect";
import "@rocket2mars/react-ripple-effect/dist/styles.css";

function App() {
useEffect(() => {
initRippleEffect();
}, []);

return (

Click me

);
}
`

Usage

$3

Add the ripple-host class to any element you want to have ripple effects:

`tsx
Click me
`

$3

Use data attributes to customize the ripple effect:

| Attribute | Description | Default |
| ------------------------ | ------------------------------------------------ | ------------------ |
| data-ripple-color | Ripple color (CSS color value) | rgba(0,0,0,0.15) |
| data-ripple-duration | Animation duration in seconds | 0.4 |
| data-ripple-max-radius | Maximum ripple radius in pixels | 2000 |
| data-ripple-center | Center the ripple effect ("true" or "false") | "false" |

$3

#### Custom Color and Duration

`tsx
className="ripple-host"
data-ripple-color="rgba(255,255,255,0.5)"
data-ripple-duration="0.6"
>
Custom Ripple

`

#### Centered Ripple

`tsx
className="ripple-host"
data-ripple-center="true"
data-ripple-color="rgba(0,0,0,0.2)"
>
Centered Ripple

`

#### Maximum Radius

`tsx
className="ripple-host"
data-ripple-max-radius="100"
data-ripple-color="rgba(255,0,0,0.3)"
>
Limited Radius

`

#### Without ripple-host Class

You can also use just the data-ripple-color attribute:

`tsx
Works without class
`

Styling

The package includes default styles, but you can override CSS variables:

`css
:root {
--ripple-color: rgba(0, 0, 0, 0.15);
--ripple-duration: 0.4s;
}
`

You can also customize the .ripple-host class to match your design:

`css
.ripple-host {
/ Your custom styles /
background: #your-color;
border-radius: 8px;
padding: 10px 20px;
}
`

API Reference

$3

Manually initialize ripple effects on all matching elements in the document.

`tsx
import { initRippleEffect } from "@rocket2mars/react-ripple-effect";

initRippleEffect();
`

$3

React hook that initializes ripple effects on mount.

`tsx
import { useRippleEffect } from "@rocket2mars/react-ripple-effect";

function App() {
useRippleEffect();
// ...
}
`

How It Works

The library automatically attaches ripple effects to any element that:

- Has the ripple-host class, OR
- Has a data-ripple-color attribute

When you call initRippleEffect() or use useRippleEffect()`, it searches for all matching elements and attaches event listeners for pointer and touch events. The ripple effect is created dynamically based on the click/touch position.

Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

License

MIT