CODEWITHSUNDEEP
reactjstypescriptswipe
chonerman
chonerman

Reputation: 135

react-swipeable - disable multi-touch swipe

I am using the package "react-swipeable" in my project and have it working just fine. The problem is, there is a component in the application that uses zoom functionality with multi-input (finger) gestures and those actions are being captured by the swipe function.

I understand I can set the swipe event to a component on the rendered application, however, I am hoping to remove the DIV that uses the zoom functionality from being recognized OR disable any swipe that is not a single touch swipe.

Any thoughts?

Here is my function for the swipe:

  import { useSwipeable } from "react-swipeable";
  
  const [docSwipes, setDocSwipes] = React.useState<any>([]);

  const { ref: documentRef } = useSwipeable({
    onSwiped: ({ dir, event }) => {
      setDocSwipes((s: any) => [...s, { dir, timeStamp: Math.floor(event.timeStamp) }]);
      //console.log(docSwipes);
      if (dir === 'Right') {
        setToggled(true);
      }
    },
    onSwiping: ({ event }) => event.stopPropagation()
  });

  React.useEffect(() => {
    documentRef(myDoc);
    // Clean up swipeable event listeners
    return () => documentRef({} as HTMLElement);
  });

I attempted to limit the target of the swipe to only the document, however it overlays the map component that renders the multi-input zoom functionality.

Upvotes: 0

Views: 63

Answers (0)

Related Questions