Touchable

A generic pressable div wrapper that renders a circular ripple animation at the point of the mouse click. It is used as the base interactive surface for custom tappable UI elements. The ripple expands and fades out over 600 ms. When disabled is true, clicks and ripples are suppressed.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | children | ReactNode | Yes | — | Content rendered inside the touchable area. | | onClick | (e: React.MouseEvent) => void | No | — | Click handler fired when the element is pressed and not disabled. | | disabled | boolean | No | false | Suppresses clicks and ripple animation. | | style | React.CSSProperties | No | {} | Inline styles for the wrapper div. | | className | string | No | — | CSS class name for the wrapper div. |

Usage

Basic

import Touchable from '@/components/Touchable';

export default function Example() {
  return (
    <Touchable
      onClick={() => console.log('Tapped')}
      style={{ padding: 16, background: '#f0f0f0', borderRadius: 8 }}
    >
      <span>Tap me</span>
    </Touchable>
  );
}

Custom card with ripple

import Touchable from '@/components/Touchable';

export default function ProductCard({ product, onSelect }: any) {
  return (
    <Touchable
      onClick={() => onSelect(product)}
      style={{
        border: '1px solid #ddd',
        borderRadius: 12,
        padding: 20,
        cursor: 'pointer',
      }}
    >
      <h3>{product.name}</h3>
      <p>{product.description}</p>
    </Touchable>
  );
}