Add swipe events to document.

[chapster11]

I've been using the package and like it a lot. I was wondering if I'm missing anything in regards to been able to set the swipe events only on elements and not on a document. Or is it possible to add swipe events to document ?

I read through some of the closed tickets and saw #150 ticket which touches on the topic of using an element to detect the swipe from left but the problem is the element is above the content which prevents the content below it from been selectable. By setting the event on document would allow for editable content.
The question was asked but not really answered in #150.

I can add my own event document.addEventListener('touchmove', touchMoveHandler)
but to save time I'd like to use this package if this is possible to have the events used on document as well as elements.

[hartzis]

@chapster11 I like this idea a lot!

It definitely has some overlap and carries some of the same concerns issues with #167 , #170 , #179 .

We need to figure out our approach for "passive event options" for v6.

---

But we could attempt to implement this for v5 if you had an interest.

I really like how react-use-gesture solved this using domTarget prop

We additionally have a helper that could be modified/updated to incorporate this prop for both touch and mouse handlers.

react-swipeable/src/index.js

Lines 138 to 146 in 939ee9f

	const attachTouch = el => {
	if (el && el.addEventListener) {
	// attach touch event listeners and handlers
	const tls = [[touchStart, onStart], [touchMove, onMove], [touchEnd, onEnd]]
	tls.forEach(([e, h]) => el.addEventListener(e, h))
	// return properly scoped cleanup method for removing listeners
	return () => tls.forEach(([e, h]) => el.removeEventListener(e, h))
	}
	}

[merrywhether]

I have this library working on the document with the following pattern:

  const { ref } = useSwipeable({
    ...
  }) as { ref: RefCallback<Document> };

  useEffect(() => {
    ref(document);
  });

Kind of hacky, but is working so far!

[hartzis]

I like the above solution. It works and doesn't require an overhaul to react-swipeable. I made a note to document this example in the README. Thank you you @merrywhether !