React Ripple

A lightweight, customizable React component that adds Material Design-style ripple effects to any element. Perfect for creating interactive UI components with smooth touch feedback.

✨ Features

• Touch-First Design: Optimized for mobile devices with touchstart event handling
• Highly Customizable: Control color, duration, scale, border radius, and border width
• TypeScript Support: Full TypeScript definitions included
• Lightweight: Minimal bundle size with no external dependencies
• Event Propagation Control: Optional event propagation stopping

🚀 Installation

npm install @bradreelee/react-ripple

📖 Usage

Please refer to demo page for detailed usage examples!

It includes:

• basic usage
• advanced usages:
  • handling borders
  • handling event propagation
  • handling custom styling

🎛️ API Reference

RippleWrapper Props

| Prop | Type | Default | Description | | ----------------- | --------------- | ------- | -------------------------------------- | | children | ReactNode | - | The element to wrap with ripple effect | | onClick | () => void | - | Click event handler | | stopPropagation | boolean | false | Whether to stop event propagation. Useful when RippleWrapper is a decendent of another RippleWrapper | | options | RippleOptions | - | Ripple customization options |

RippleOptions

| Option | Type | Default | Description | | -------------- | -------- | ---------------------- | ----------------------------------- | | color | string | "rgba(0, 0, 0, 0.2)" | Ripple color (CSS color value) | | duration | number | 600 | Animation duration in milliseconds | | borderRadius | string | "0%" | Border radius of the ripple | | borderWidth | string | "0px" | Border width around the ripple | | scale | number | 4 | Final scale of the ripple animation |

📄 License

MIT License - see LICENSE file for details.