useLongPress

useLongPress es un Hook de React que detecta cuando mantienes presionado un elemento durante un tiempo especificado. Gestiona tanto eventos del ratón como eventos táctiles, lo que permite un funcionamiento uniforme en computadoras y dispositivos móviles.

Interfaz

function useLongPress<E extends HTMLElement>(
  onLongPress: (event: React.MouseEvent<E> | React.TouchEvent<E>) => void,
  options?: UseLongPressOptions
): Object;

Parámetros

• onLongPressrequired · (event: React.MouseEvent<E> | React.TouchEvent<E>) => void
  

  El callback que se ejecuta al detectar una pulsación prolongada.

• optionsUseLongPressOptions
  

  Opciones de configuración del comportamiento de la pulsación prolongada.

  • options.delaynumber · 500
    

    El tiempo en milisegundos antes de activar la pulsación prolongada. El valor predeterminado es 500 ms.

  • options.moveThresholdObject
    

    Movimiento máximo permitido antes de cancelar una pulsación prolongada.

  • options.moveThreshold.xnumber
    

    Movimiento horizontal máximo en píxeles.

  • options.moveThreshold.ynumber
    

    Movimiento vertical máximo en píxeles.

  • options.onClick(event) => void
    

    Función opcional que se ejecuta al hacer un clic normal (presionar y soltar antes de que transcurra el tiempo de espera).

  • options.onLongPressEnd(event) => void
    

    Función opcional que se ejecuta cuando termina una pulsación prolongada.

Valor de retorno

• Object
  

  Controladores de eventos para asignar a un elemento.

  • onMouseDown(event: MouseEvent<E> | TouchEvent<E>) => void
    

    Controlador de eventos de presión del botón del ratón.

  • onMouseUp(event: MouseEvent<E> | TouchEvent<E>) => void
    

    Controlador de eventos de liberación del botón del ratón.

  • onMouseLeave(event: MouseEvent<E> | TouchEvent<E>) => void
    

    Controlador de eventos de salida del puntero del ratón del elemento.

  • onTouchStart(event: MouseEvent<E> | TouchEvent<E>) => void
    

    Controlador de eventos de inicio del contacto táctil.

  • onTouchEnd(event: MouseEvent<E> | TouchEvent<E>) => void
    

    Controlador de eventos de finalización del contacto táctil.

  • onMouseMove(event: MouseEvent<E> | TouchEvent<E>) => void
    

    Controlador de eventos de movimiento del ratón. Está incluido si proporcionas moveThreshold.

  • onTouchMove(event: MouseEvent<E> | TouchEvent<E>) => void
    

    Controlador de eventos de movimiento táctil. Está incluido si proporcionas moveThreshold.

Ejemplo

import { useLongPress } from 'react-simplikit';

function ContextMenu() {
  const [menuVisible, setMenuVisible] = useState(false);

  const longPressHandlers = useLongPress(() => setMenuVisible(true), {
    delay: 400,
    onClick: () => console.log('Clic normal'),
    onLongPressEnd: () => console.log('Pulsación prolongada completada'),
  });

  return (
    <div>
      <button {...longPressHandlers}>Mantén presionado</button>
      {menuVisible && <div className="context-menu">Menú contextual</div>}
    </div>
  );
}