Disable drag to navigate (only navigate via button clicks)

[minijoo]

I have found myself in a scenario where I cannot use event.preventDefault and event.stopPropagation to disable drag navigation. The reason being, I am using yarl with a library called moveable where I am designing the div container of yarl to be moved around the page via the same (or events after) the drag event for yarl navigation. Trying to use the suggestion from #203 and #184 did not work because it disabled dragging on the moveable (library) mechanism. I even tried to wrap the image slides around a customer render where the interception of the events could be done at individual slide level, with no success.

So I thought for this to work, moveable container, being the outer component, can change to stop propagation properly after it does it what it wants to do, OR I can see if yarl can add a component-level feature that can disable drag navigation specified as a property or something, independent of rendered html elements.

I have attached a screengrab of my project where the two libraries working together. For now the dragging of the container also swipes the image in yarl, which is not desirable but also not terrible.

Screen.Recording.2025-03-25.at.1.04.41.PM.mov

By the way, this component is awesome. Thank you for what you do.

[igordanchenko]

Hi there!

Thank you for bringing up this use case. Before I go ahead and implement a configuration option for this, I'd like you to confirm that this will provide the desired UX. The following patch completely disables pointer swipe navigation. You can save it under patches/yet-another-react-lightbox+3.21.8.patch and apply with the patch-package.

diff --git a/node_modules/yet-another-react-lightbox/dist/index.js b/node_modules/yet-another-react-lightbox/dist/index.js
index bfea5ea..72fec8a 100644
--- a/node_modules/yet-another-react-lightbox/dist/index.js
+++ b/node_modules/yet-another-react-lightbox/dist/index.js
@@ -1145,7 +1145,7 @@ function Controller({ children, ...props }) {
         (offset) => pull(offset),
         (offset) => pull(offset, true),
     ];
-    usePointerSwipe(...swipeParams, closeOnPullUp, closeOnPullDown, ...pullParams);
+    //usePointerSwipe(...swipeParams, closeOnPullUp, closeOnPullDown, ...pullParams);
     useWheelSwipe(swipeState, ...swipeParams);
     const focusOnMount = useEventCallback(() => {
         if (controller.focus &&

Please let me know if this addresses your use case.

[minijoo]

Partially... I use yarl in other parts of the same project where I want to keep the pointer swipe. In fact, I should've added to my use case that disabling pointer swipe nav should be configurable at the top/upper-level. My two cents here is that a configuration feature as fundamentally affecting as this could create confusion to other first-class configurations such as closeOnPullDown or Zoom plugin. For example, a use case could be that yarl is used without swipe for slide change, but with swipe for closing on pulldown. Another use cause could be that Inline to Fullscreen is used, but in Inline view, swipe nav is disabled (like my original use case), but in Fullscreen view, swipe nav is enabled.

The latter use case (screengrabbed below) is something I've been trying to cook up this morning as an upgrade to my original use case. It definitely could add another wrinkle to what we are discussing here.

Screen.Recording.2025-03-26.at.1.09.16.PM.mov

Honestly, everything is working great as-is (kudos!), except not having the ability to conditionally pause changing slides on swipes makes things feel a little buggy. (as a bonus, I would love to see closeOnPullDown working on exiting fullscreen).

As a side note, the other library I mentioned (moveable) allows some listener behaviors to be paused by having a property they call draggable that you can pass true or false to. So if I want to use its component with their draggable feature turned on, I set it up with <Moveable draggable={true} ..., or in my case I use a useState variable to change it to false depending on my needs (i.e. draggable={isDraggable}. Something similar in yarl could have usage like shown below, when enabling swipe nav when entering fullscreen:

enterFullscreen: () => {
  setIsSlideSwipeable(true);
},

[igordanchenko]

Thank you for the very detailed feedback. Indeed, that patch disabled more features than intended. Honestly, I wasn’t expecting you to perform such thorough testing. I went ahead and published feature preview under the yarl-343 branch. Please let me know if it incorporates all your feedback.

npm rm yet-another-react-lightbox
npm i github:igordanchenko/yet-another-react-lightbox#yarl-343

# clear your build cache (e.g., rm -rf .next)

export default function App() {
  const [index, setIndex] = React.useState(0);
  const [disableSwipeNavigation, setDisableSwipeNavigation] = React.useState(true);

  return (
    <Lightbox
      index={index}
      slides={slides}
      plugins={[Inline, Fullscreen, Zoom]}
      inline={{ style: { width: 600, maxWidth: "100%", aspectRatio: 3 / 2 } }}
      controller={{ disableSwipeNavigation, closeOnPullUp: true, closeOnPullDown: true }}
      on={{
        view: ({ index: currentIndex }) => setIndex(currentIndex),
        enterFullscreen: () => setDisableSwipeNavigation(false),
        exitFullscreen: () => setDisableSwipeNavigation(true),
      }}
    />
  );
}

[igordanchenko]

@minijoo please let me know if you have any feedback.

[minijoo]

Yes, sorry. Here's my feedback.

Worked exactly as I had hoped. Able to disable/enable swipe nav via state var.

Hopefully others will find this useful. Thank you!

[igordanchenko]

Thank you for confirming. This feature is now available in v3.22.0.