# Ripple

**When to use:** Material-style ink ripple effect on any interactive element — buttons, list items, cards, tiles.

**Keywords:** material ripple, click ripple effect

**Import:** `import { Ripple } from '@ahrowe/ui'`

A click on a control inside the rippling element does not ripple: the ripple answers for the
element it wraps, and a field or a button inside it answers for itself.

```tsx
import { Ripple } from '@ahrowe/ui';

// Wrap any element — ripple fires on click
<Ripple>
  <div className="list-item">Click me</div>
</Ripple>

// Custom colour and duration
<Ripple rippleBackground="rgba(255,255,255,0.3)" rippleAnimationLength={400}>
  <button>Styled ripple</button>
</Ripple>

// Clip ripple to the container bounds
<Ripple overflowHidden>
  <div className="card">Content</div>
</Ripple>

// Programmatic ripple via ref
import { useRef } from 'react';
import type { RippleHandle } from '@ahrowe/ui';
const rippleRef = useRef<RippleHandle>(null);
<Ripple ref={rippleRef} manualOnly>
  <div>Trigger ripple from code</div>
</Ripple>
// rippleRef.current?.addRipple()
```

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `rippleBackground` | `string` | Ripple colour (CSS value, default semi-white) |
| `rippleAnimationLength` | `number` | Duration in ms (default ~600) |
| `overflowHidden` | `boolean` | Clip ripple to container |
| `disabled` | `boolean` | Disable ripple entirely |
| `manualOnly` | `boolean` | Suppress click-triggered ripple; fire via ref |