Change the lightbox from Inline to Fullscreen on clicking the current slide

[laukaichung]

I want to turn an inline lightbox into a fullscreen lightbox when the user clicks on the current slide. The only way I find working is to conditionally remove the Inline plugin and inline style. Is there any better solution?

Example: https://codesandbox.io/p/sandbox/yet-another-react-lightbox-examples-forked-hdv7t9

const inline = {
  style: {
    width: "100%",
    maxWidth: "900px",
    aspectRatio: "3 / 2",
    margin: "0 auto",
  },
};

export default function InlinePlugin() {
  const [isInline, setIsInline] = useState(true);
  const plugins: Plugin[] = [];
  if (isInline) {
    plugins.push(Inline);
  } else {
    plugins.push(Captions);
  }
  return (
    <>
      <Lightbox
        open={!isInline ? true : undefined}
        close={() => setIsInline(true)}
        slides={slides}
        inline={isInline ? inline : undefined}
        carousel={{
          spacing: 0,
          padding: 0,
          imageFit: "cover",
        }}
        on={{
          click: () => {
            setIsInline(false);
          },
        }}
        plugins={plugins}
      />
    </>
  );
}

[igordanchenko]

Hi there!

I'd use 2 separate Lightbox instances in this case. Does this look like the experience you want to implement?

https://codesandbox.io/p/sandbox/yet-another-react-lightbox-136-jjmq8z?file=%2Fsrc%2FApp.tsx