Inline Plugin

The Inline plugin transforms the lightbox into an image carousel that renders inline on the webpage.

Documentation

The plugin adds and overrides the following Lightbox properties.

Property	Type	Description
inline	React.HTMLAttributes<HTMLDivElement>	HTML div element attributes to be passed to the Inline plugin container. Defaults: { style: { width: "100%", height: "100%" } }
open	true	This prop is ignored.
close	() => {}	This prop is ignored.
controller.focus	false	This prop is ignored.
toolbar.buttons	(React.ReactNode \| "close")[]	The "close" button is ignored.

Example

import Lightbox from "yet-another-react-lightbox";
import Inline from "yet-another-react-lightbox/plugins/inline";
import "yet-another-react-lightbox/styles.css";

// ...

return (
  <div style={{ width: "100%", maxWidth: "900px", aspectRatio: "3 / 2" }}>
    <Lightbox
      plugins={[Inline]}
      // ...
    />
  </div>
);

// or

return (
  <Lightbox
    plugins={[Inline]}
    inline={{
      style: { width: "100%", maxWidth: "900px", aspectRatio: "3 / 2" },
    }}
    // ...
  />
);