Sources

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>
				]}
			/>
		</>
	);
}