Untitled

import LightGallery from "lightgallery/react";
import lgZoom from "lightgallery/plugins/zoom";
import lgThumbnail from "lightgallery/plugins/thumbnail";

import "lightgallery/css/lightgallery.css";
import "lightgallery/css/lg-thumbnail.css";
import "lightgallery/css/lg-zoom.css";
import "./styles.css";

export default function App() {
  const onInit = () => {
    console.log("initialized .....");
  };

  const onBefore = () => {
    console.log("on before .....");
  };

  return (
    <div className="App">
      <LightGallery
        onInit={onInit}
        onBeforeSlide={onBefore}
        plugins={[lgZoom, lgThumbnail]}
      >
        <a href="/">
          <img
            src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=340&q=80"
            alt="test"
          />
        </a>

        <a href="/">
          <img
            src="https://images.unsplash.com/photo-1473876988266-ca0860a443b8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=340&q=80"
            alt="test2"
          />
        </a>
      </LightGallery>
    </div>
  );
}