react-image-viewer-hook/dist/useImageViewer.js

Image viewer (aka Lightbox) React Hook

// src/useImageViewer.tsx
import React, {
  useCallback,
  useRef,
  useState,
  lazy,
  Suspense,
  useEffect
} from "react";
var LazyImageViewer = lazy(() => import("./ImageViewer-5KR27HWJ.js"));
function useImageViewer() {
  const images = useRef([]);
  images.current = [];
  const setOpens = useRef(
    /* @__PURE__ */ new Set()
  );
  const ImageViewer = useCallback(
    function ImageViewer2({
      fallback,
      children
    }) {
      const [isOpen, setOpen] = useState(void 0);
      useEffect(() => {
        setOpens.current.add(setOpen);
        return () => {
          setOpens.current.delete(setOpen);
        };
      }, [setOpen]);
      const handleClose = useCallback(() => setOpen(void 0), []);
      if (isOpen === void 0 || typeof window === "undefined") {
        return null;
      }
      const Viewer = LazyImageViewer;
      return /* @__PURE__ */ React.createElement(Suspense, { fallback: fallback ?? null }, /* @__PURE__ */ React.createElement(
        Viewer,
        {
          images: images.current,
          onClose: handleClose,
          defaultIndex: isOpen,
          children
        }
      ));
    },
    []
  );
  return {
    /**
     * Create an `onClick` event handler meant to add an image to viewer as well as opening the
     * the viewer once invoked.
     * @param url The URL of the image that should be added to the image viewer.
     */
    getOnClick(url, opts) {
      const index = images.current.length;
      if (url) {
        images.current.push([url, opts]);
      }
      return (e) => {
        e.preventDefault();
        for (const setOpen of setOpens.current) {
          setOpen(index);
        }
      };
    },
    /**
     * Render the image viewer. It will only actually render something if the viewer is opened. Can
     * be added everywhere you like including into portals.
     */
    ImageViewer
  };
}
export {
  useImageViewer
};
//# sourceMappingURL=useImageViewer.js.map