Touchable

Wrapper div genérico presionable que renderiza una animación de ripple circular en el punto donde se hace clic. Se usa como superficie interactiva base para elementos de UI táctiles personalizados. El ripple se expande y desvanece en 600 ms. Cuando disabled es true, los clics y el ripple se suprimen.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | children | ReactNode | Sí | — | Contenido del área presionable. | | onClick | (e: React.MouseEvent) => void | No | — | Handler de clic cuando no está deshabilitado. | | disabled | boolean | No | false | Suprime clics y animación de ripple. | | style | React.CSSProperties | No | {} | Estilos del div wrapper. | | className | string | No | — | Clase CSS del div wrapper. |

Uso

Básico

import Touchable from '@/components/Touchable';

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

Tarjeta con ripple personalizado

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>
  );
}