search

minwork / use-long-press

React hook for detecting click (or tap) and hold event
MIT License
122 stars 12 forks source link

TouchEnd should be possible to set on body #4

Closed fivethreeo closed 3 years ago

fivethreeo commented 3 years ago

Then you could do dragging outside the element while holding. Also mouseleave should be optional for the same reason. Was thinking of using this for a interactive clock component. Then I could drag around the clock without callbacks being called if I veer out of the clock.

minwork commented 3 years ago

Hey,

because useLongPress hook returns object with listeners you can manually attach them to proper elements for example:

const callback = useCallback(() => { console.log('long press'); }, []);
const {
    onMouseDown,
    onMouseUp,
    onMouseLeave,
    onTouchStart,
    onTouchEnd
} = useLongPress(callback);
<body onTouchEnd={onTouchEnd}>
  <div onMouseUp={onMouseUp}>...</div>
</body>
minwork commented 3 years ago

@fivethreeo Does this solution address your case?

fivethreeo commented 3 years ago

I think so, but a example with binding handlers using js dom binding and useEffect/useLayoutEffect, refs and to go crazy touch events ;)