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.

Important!

Sources prop is not reactive. If you want to display new sources you need to remount lightbox. In most cases best solution is to use React key prop. When this prop updates React remounts component.

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

return (
<>
<button onClick={() => setToggler(!toggler)}>
Toggle Lightbox
</button>
<button onClick={() => setProductIndex(1)}>
Load second product
</button>
<FsLightbox
toggler={toggler}
sources={productsImages[productIndex]}
key={productIndex}
/>
</>
);
}

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!