Fullscreen Lightbox Javascript Fullscreen Lightbox ,React Fullscreen Lightbox Vue

React Lightbox Documentation

Learn how to use React version of Fullscreen Lightbox!

Updating props

Lightbox is not reactive to props changes other than toggler and slide controls. To update them you need to remount lightbox. In most cases best solution is to use React key prop, after updating it React remounts component.

Example with updating sources:

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}
/>
</>
);
}
Get connected wth us on social networks!