Toolbar button order

[Flo2410]

Hi,
first of all, thank you for that amazing component!

I would like to know if there is any way to customize the order of the buttons in the toolbar?

Here my situation:
I am using the fullscreen plugin and want to add a custom share button to the left of it.

Currently, it looks like that:

with the following toolbar props:

<Lightbox
toolbar={{
  buttons: [
    <button type="button" className="yarl__button" key={"share_button"}>
      <BiShareAlt className="p-1 yarl__icon" />
    </button>,
    "close",
  ],
}}
plugins={[Fullscreen, Captions]}
// more config
/>

Unfortunately, I couldn't find a way to display the share button left of the fullscreen one.

I would like it to look like this:

Is there any way to do this?

[igordanchenko]

Thank you for posting this great question. As of today, there is no elegant way to change the order of buttons added through the toolbar.buttons prop and the ones added by plugins. Each plugin prepends its button to the beginning of the toolbar.buttons array, so you can easily re-arrange plugin buttons by changing the order of the plugins. However, plugin buttons would always appear to the left of the buttons you add through the toolbar.buttons prop, and the only way to change this is to add your own buttons via a custom plugin as well. Here is how you'd do it.

import * as React from "react";
import { Lightbox, Plugin } from "yet-another-react-lightbox";
import { useLightboxState } from "yet-another-react-lightbox/core";
import Captions from "yet-another-react-lightbox/plugins/captions";
import Fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
import { BiShareAlt } from "react-icons/bi";

function ShareButton({ onClick }: { onClick: (currentIndex: number) => void }) {
  const { slides, currentIndex } = useLightboxState().state;

  return (
    <button
      type="button"
      className="yarl__button"
      disabled={slides.length === 0}
      onClick={() => onClick(currentIndex)}
    >
      <BiShareAlt className="p-1 yarl__icon" />
    </button>
  );
}

export default function Page() {
  const [open, setOpen] = React.useState(false);

  const onClick = (currentIndex: number) => {
    // handle Share button click
  };

  const Share: Plugin = ({ augment }) => {
    augment(({ toolbar: { buttons, ...restToolbar }, ...rest }) => ({
      toolbar: { buttons: [<ShareButton key="share" onClick={onClick} />, ...buttons], ...restToolbar },
      ...rest,
    }));
  };

  return (
    <>
      <Lightbox
        open={open}
        close={() => setOpen(false)}
        slides={slides}
        plugins={[Fullscreen, Captions, Share]}
      />

      // ...
    </>
  );
}

p.s. I've added a note to simplify this process in one of the future releases.

[Flo2410]

Thank you very much for the fast answer.

[igordanchenko]

With v3.3.0 you can now override plugin's button position:

<Lightbox
  toolbar={{
    buttons: [
      <button type="button" className="yarl__button" key={"share_button"}>
        <BiShareAlt className="p-1 yarl__icon" />
      </button>,
      "fullscreen",
      "close",
    ],
  }}
  plugins={[Fullscreen, Captions]}
  // ...
/>

[Flo2410]

Nice, thank you!