useDoubleClick

useDoubleClick es un Hook de React que distingue entre los eventos de un solo clic y los de doble clic. Retrasa la ejecución del callback de un solo clic durante el tiempo que especificas y la cancela si ocurre un segundo clic (es decir, un doble clic) dentro de ese período.

Interfaz

function useDoubleClick<E extends HTMLElement>(
  props: Object
): (event: MouseEvent<E>) => void;

Parámetros

• propsrequired · Object
  

  Opciones de configuración para gestionar los clics.

  • props.delaynumber · 250
    

    El número de milisegundos de espera antes de ejecutar el callback de un solo clic. El valor predeterminado es 250 ms.

  • props.click(event: MouseEvent<E>) => void
    

    El callback que debe ejecutarse al hacer un solo clic.

  • props.doubleClickrequired · (event: MouseEvent<E>) => void
    

    El callback que debe ejecutarse al hacer doble clic. Obligatorio.

Valor de retorno

• (event: MouseEvent<E>) => void
  

  Una función para gestionar los clics que puedes asignar al evento onClick de un elemento.

Ejemplo

function GalleryCard() {
  const [selected, setSelected] = useState(false);

  const handleClick = () => setSelected(prev => !prev);
  const handleDoubleClick = () => alert('¡Ampliar!');

  const handleEvent = useDoubleClick({
    click: handleClick,
    doubleClick: handleDoubleClick,
  });

  return (
    <div onClick={handleEvent}>
      {selected ? 'Seleccionado' : 'No seleccionado'}
    </div>
  );
}