Updating animation swipe duration from a custom toolbar button

[SenshiSentou]

Hi,

Apologies if this is a noob question; I'm completely new to React.

What I'm trying to add is a toolbar button that toggles the lightbox's swipe duration between two values (400 and 0). I have successfully added my button (using augment()), and when clicked it sets a localStorage item. However, I am very stuck on actually referencing and updating the current lightbox's animation settings.

I have tried passing the ref to the controller from the augment() function to my AnimationToggleButton, but it's always undefined. I'm sure I can hack something together, but I'd really like to know how to do this properly.

Thanks!

[igordanchenko]

Hi there! Unless you are building a reusable plugin, there is an easier way to implement this. You just need to create a state variable to store your swipe duration and read the initial value in a layout effect. You can add your custom button through the toolbar.buttons prop.

const [swipe, setSwipe] = useState(400);

useLayoutEffect(() => {
  const swipeValue = localStorage.getItem("swipe");
  if (swipeValue) {
    setSwipe(Number.parseInt(swipeValue, 10));
  }
}, []);

const toggleSwipe = () => {
  const swipeValue = swipe === 0 ? 400 : 0;
  setSwipe(swipeValue);
  localStorage.setItem("swipe", `${swipeValue}`);
};

// ...

<Lightbox
  // ...
  animation={{ swipe }}
  toolbar={{
    buttons: [
      <button key="swipe" type="button" className="yarl__button" onClick={toggleSwipe}>
        {swipe} ms
      </button>,
      "close",
    ],
  }}
/>

[SenshiSentou]

That works perfectly, thank you so much! And totally fine for my use-case :)