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