React Fullscreen Lightbox
Fullscreen Lightbox adjusted to work in environment of one the best frontend frameworks - React.js.
Powerful Lightbox with just one component.
Fullscreen Lightbox with all it's functionalities now working within React.js.
Speed up your work by including ready, high editable lightbox.
Learn more about React Fullscreen Lightbox!
import React, { useState } from 'react';
import FsLightbox from 'fslightbox-react';
function App() {
// initial toggler value determines if lightbox should be opened on init
// if toggler is updated when lightbox is closed it will open it
// if toggler is updated when lightbox is opened it will close it
const [toggler, setToggler] = useState(false);
return (
<>
<button onClick={ () => setToggler(!toggler) }>
Toggle Lightbox
</button>
<FsLightbox
toggler={ toggler }
urls={ [
'https://i.imgur.com/fsyrScY.jpg',
'https://www.youtube.com/watch?v=xshEZzpS4CQ',
'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
] }
/>
</>
);
}
export default App;
