Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

React Lightbox Documentation

Learn how to use React version of Fullscreen Lightbox!


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 sources prop you can also 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
<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>


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

Get connected wth us on social networks!