@n-ivan/react-justified-gallery 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ivan Nesterovic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/justified-gallery.js

@@ -0,0 +1,171 @@
+import { jsx as g } from "react/jsx-runtime";
+import { useRef as T, useState as C, useCallback as F, useEffect as G, useMemo as U } from "react";
+function k(o, t) {
+  let e = null;
+  const i = (...n) => {
+    e !== null && clearTimeout(e), e = setTimeout(() => {
+      o(...n), e = null;
+    }, t);
+  };
+  return i.cancel = () => {
+    e !== null && (clearTimeout(e), e = null);
+  }, i;
+}
+function B(o) {
+  const t = T(null), [e, i] = C(0), n = F(() => {
+    if (t.current) {
+      const l = t.current.getBoundingClientRect().width;
+      i(l);
+    }
+  }, []);
+  return G(() => {
+    const l = t.current;
+    if (!l) return;
+    n();
+    const h = k(n, o), c = new ResizeObserver(() => {
+      h();
+    });
+    return c.observe(l), () => {
+      c.disconnect(), h.cancel();
+    };
+  }, [n, o]), { containerRef: t, width: e };
+}
+function D(o) {
+  for (let t = 0; t < o.length; t++) {
+    const e = o[t];
+    if (e.length === 0)
+      throw new Error(`Row ${t} is empty. All rows must contain at least one image.`);
+    for (let i = 0; i < e.length; i++) {
+      const n = e[i];
+      if (typeof n.width != "number" || n.width <= 0)
+        throw new Error(
+          `Image at row ${t}, index ${i} has invalid width. Expected positive number, got: ${n.width}`
+        );
+      if (typeof n.height != "number" || n.height <= 0)
+        throw new Error(
+          `Image at row ${t}, index ${i} has invalid height. Expected positive number, got: ${n.height}`
+        );
+    }
+  }
+}
+function O(o, t, e) {
+  return D(o), o.map((i) => {
+    const n = e * (i.length - 1), l = t - n, h = i.reduce((a, s) => a + s.width / s.height, 0), c = l / h;
+    return {
+      images: i.map((a) => {
+        const s = a.width / a.height, f = c * s;
+        return {
+          image: a,
+          computedWidth: f,
+          computedHeight: c
+        };
+      }),
+      height: c
+    };
+  });
+}
+const _ = 8, x = 150;
+function P({
+  images: o,
+  gap: t = _,
+  renderImage: e,
+  resizeDebounce: i = x,
+  lazyLoad: n = !0,
+  onImageLoad: l,
+  onImageError: h,
+  containerStyle: c,
+  rowStyle: w
+}) {
+  const { containerRef: a, width: s } = B(i), f = U(() => s === 0 || o.length === 0 ? [] : O(o, s, t), [o, s, t]), $ = (u) => (r) => {
+    l == null || l(u, r);
+  }, R = (u) => (r) => {
+    h == null || h(u, r);
+  }, E = (u) => {
+    const { image: r, computedWidth: m, computedHeight: d } = u;
+    return /* @__PURE__ */ g(
+      "img",
+      {
+        src: r.src,
+        alt: r.alt ?? "",
+        width: m,
+        height: d,
+        loading: n ? "lazy" : void 0,
+        onLoad: $(r),
+        onError: R(r),
+        style: {
+          display: "block",
+          width: m,
+          height: d
+        }
+      }
+    );
+  };
+  return s === 0 ? /* @__PURE__ */ g(
+    "div",
+    {
+      ref: a,
+      role: "region",
+      "aria-label": "Image gallery",
+      style: {
+        width: "100%",
+        ...c
+      }
+    }
+  ) : /* @__PURE__ */ g(
+    "div",
+    {
+      ref: a,
+      role: "region",
+      "aria-label": "Image gallery",
+      style: {
+        width: "100%",
+        ...c
+      },
+      children: f.map((u, r) => /* @__PURE__ */ g(
+        "div",
+        {
+          role: "group",
+          "aria-label": `Gallery row ${r + 1}`,
+          style: {
+            display: "flex",
+            gap: t,
+            marginBottom: r < f.length - 1 ? t : 0,
+            ...w
+          },
+          children: u.images.map((m, d) => {
+            const { image: p, computedWidth: b, computedHeight: y } = m, W = d === 0, A = d === u.images.length - 1, v = {
+              image: p,
+              computedWidth: b,
+              computedHeight: y,
+              originalWidth: p.width,
+              originalHeight: p.height,
+              rowIndex: r,
+              imageIndex: d,
+              isFirstInRow: W,
+              isLastInRow: A
+            }, H = e ? e(v) : E(v);
+            return /* @__PURE__ */ g(
+              "div",
+              {
+                tabIndex: 0,
+                role: "img",
+                "aria-label": p.alt || `Image ${r + 1}-${d + 1}`,
+                style: {
+                  width: b,
+                  height: y,
+                  flexShrink: 0
+                },
+                children: H
+              },
+              `${r}-${d}`
+            );
+          })
+        },
+        r
+      ))
+    }
+  );
+}
+export {
+  P as JustifiedGallery
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@n-ivan/react-justified-gallery",
+  "version": "1.0.0",
+  "description": "A React component for creating justified image galleries",
+  "keywords": [
+    "react",
+    "gallery",
+    "justified",
+    "images",
+    "layout"
+  ],
+  "homepage": "https://github.com/n-ivan/react-justified-gallery#readme",
+  "bugs": {
+    "url": "https://github.com/n-ivan/react-justified-gallery/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/n-ivan/react-justified-gallery.git"
+  },
+  "license": "MIT",
+  "author": "Ivan Nesterovic",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/justified-gallery.js"
+    }
+  },
+  "main": "./dist/justified-gallery.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "demo": "vite --config demo/vite.config.ts",
+    "test": "vitest",
+    "lint": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@types/node": "^25.0.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "jsdom": "^23.0.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.8",
+    "vitest": "^1.0.4"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "module": "./dist/justified-gallery.js"
+}