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