A React component for displaying images, videos, or, through custom sources, anything you want in a clean overlying box. The project's website: https://fslightbox.com.
| Dependency | Version |
|---|---|
| react | at least 16.8.0 |
| react-dom | at least 16.8.0 |
npm install fslightbox-react
The .tgz archive, in its entirety, should be put somewhere in the end project, for example, "./src/lib". Then run the package manager's install command with the path to that archive. The command have to be run from the directory where your project's "package.json" file is.
$ npm install ./src/lib/[lightbox archive name] For example:
$ npm install ./src/lib/fslightbox-react-1.0.0.tgz
importReact,{useState}from"react";importFsLightboxfrom"fslightbox-react";functionApp(){// To open the lightbox change the value of the "toggler" prop.const[toggler,setToggler]=useState(false);return(<><buttononClick={()=>setToggler(!toggler)}>
Open the lightbox.
</button><FsLightboxtoggler={toggler}sources={['https://i.imgur.com/fsyrScY.jpg','https://www.youtube.com/watch?v=xshEZzpS4CQ','https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4']}/></>);}exportdefaultApp;Available at: https://fslightbox.com/react/documentation.
Available at: https://fslightbox.com/react.
| Browser | Works? |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |