react-swipeable

Qué es

react-swipeable es una librería de React, originalmente publicada por Formidable Labs (hoy bajo Nearform), que expone el hook useSwipeable para detectar gestos de deslizamiento. Está escrita en TypeScript y abstrae la complejidad de los eventos táctiles (touch) y de ratón, ofreciendo una API uniforme. Se centra en las direcciones de swipe (izquierda, derecha, arriba, abajo) y en eventos de inicio, movimiento y fin del gesto.

Para qué sirve

• Implementar carruseles, sliders o galerías que respondan a deslizamientos.
• Añadir navegación por gestos en interfaces móviles (descartar tarjetas, abrir menús laterales).
• Detectar la dirección, velocidad y distancia de un swipe para activar acciones.
• Unificar el manejo de eventos táctiles y de ratón sin escribir lógica de bajo nivel.

Cuándo usarlo

Es ideal cuando necesitas reconocer gestos de deslizamiento en una aplicación React sin depender de una librería de carrusel completa o de una solución de gestos más pesada. Para animaciones físicas y gestos complejos (arrastrar, soltar, inercia) conviene valorar alternativas como @use-gesture/react o react-spring. react-swipeable destaca por ser ligera y enfocada solo en el swipe.

Ejemplo

Instalación con npm:

npm install react-swipeable

Uso básico del hook useSwipeable:

import { useSwipeable } from 'react-swipeable';

function Carousel() {
  const handlers = useSwipeable({
    onSwipedLeft: () => console.log('swipe a la izquierda'),
    onSwipedRight: () => console.log('swipe a la derecha'),
    delta: 10,
    preventScrollOnSwipe: true,
    trackMouse: true,
  });

  return <div {...handlers}>Desliza aquí</div>;
}

Puntos clave

• API basada en hook (useSwipeable) que devuelve los handlers a esparcir sobre el elemento.
• Detecta dirección, distancia, velocidad y eventos de inicio/fin del gesto.
• Opciones configurables como delta, swipeDuration, preventScrollOnSwipe y trackMouse.
• Usa listeners pasivos por defecto para no penalizar el rendimiento ni el scroll.

Ten en cuenta

Requiere React y se centra exclusivamente en gestos de swipe; no resuelve arrastrar y soltar ni animaciones físicas. Tras el cierre de Formidable Labs como marca, el mantenimiento del proyecto pasó a Nearform; el repositorio sigue activo (última versión v7.0.2, compatible con React 19), pero conviene revisar la cadencia de actualizaciones a futuro. Su licencia es MIT.