Custom sources
With the "sources" prop you can also display custom content—such as a Vimeo video, Google map, etc.—but remember, components cannot be custom sources, they have to be wrapped with something.
import React, { useState } from "react";
import FsLightbox from "fslightbox-react";
import ExampleComponent from "ExampleComponent.jsx";
function App() {
const [toggler, setToggler] = useState(false);
return (
<>
<button onClick={() => setToggler(!toggler)}>
Open the lightbox.
</button>
<FsLightbox
toggler={toggler}
sources={[
<iframe
src="https://player.vimeo.com/video/22439234"
width="1920px"
height="1080px"
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen
/>,
<iframe
src="//maps.google.com/maps?q=?&q=London&output=embed"
width="1920px"
height="1080px"
allowFullScreen="allowfullscreen"
scrolling="no"
allow="autoplay; fullscreen"
/>,
<div style={{ width: "200px", height: "100px" }}>
<ExampleComponent>
A wrapped component.
</ExampleComponent>
</div>
]}
/>
</>
);
}