App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import * as React from "react"; import Lightbox from "yet-another-react-lightbox"; import Zoom from "yet-another-react-lightbox/plugins/zoom"; import Captions from "yet-another-react-lightbox/plugins/captions"; import "yet-another-react-lightbox/plugins/captions.css"; import Download from "yet-another-react-lightbox/plugins/download"; import Share from "yet-another-react-lightbox/plugins/share"; import "yet-another-react-lightbox/styles.css"; import img1 from "./assets/1.jpeg"; import img2 from "./assets/2.jpeg"; import img3 from "./assets/3.jpeg"; export default function App() { const [open, setOpen] = React.useState(false); const captionsRef = React.useRef(null); const zoomRef = React.useRef(null); return ( <> <button type="button" onClick={() => setOpen(true)}> Open Lightbox </button> <Lightbox open={open} close={() => setOpen(false)} plugins={[Zoom, Captions, Download, Share]} zoom={{ ref: zoomRef }} captions={{ ref: captionsRef }} slides={[ { src: img1, title: "First Image", description: "First Image description", }, { src: img2, title: "Second Image", description: "Second Image description", }, { src: img3, title: "Third Image", description: "Third Image description", }, ]} /> </> ); } |
