Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

React Lightbox Documentation

Learn how to use React version of Fullscreen Lightbox!

Sources

To display images, HTML videos, YouTube videos you need to use sources array prop. You can give full url or only path.

Custom sources

With customSources prop you can display content such as Vimeo videos, Google maps, whatever you want:

function App({ productsImages }) {
const [toggler, setToggler] = useState(false);
const [productIndex, setProductIndex] = useState(0);

return (
<>
<button onClick={() => setToggler(!toggler)}>
Toggle Lightbox
</button>
<FsLightbox
toggler={toggler}
customSources={[
<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'}}>
<h3>I'm a completely custom source</h3>
</div>
]}
/>
</>
);
}

Important!

Components cannot be custom sources - you need to wrap them with some element.

Get connected wth us on social networks!