@n-ivan/react-justified-gallery 1.0.2 → 2.0.0

package/README.md

@@ -1,12 +1,14 @@
 # react-justified-gallery
 
-A React component for creating beautiful justified image galleries with automatic layout calculations and responsive behavior.
+A React component for creating beautiful justified image galleries with CSS flexbox layout.
 
 ## Features
 
 - **Perfect Justification** - Images fill the full container width while preserving aspect ratios
-- **Fully Responsive** - Automatically recalculates layout on container resize using ResizeObserver
+- **Fully Responsive** - Pure CSS handles resize automatically
 - **Flexible Rendering** - Custom render prop for complete control over image display
+- **SSR-Friendly** - No client-side measurement needed
+- **Zero Re-renders** - No state changes on container resize
 
 ## Installation
 
@@ -17,7 +19,7 @@ npm install @n-ivan/react-justified-gallery
 ## Quick Start
 
 ```tsx
-import { JustifiedGallery } from 'react-justified-gallery';
+import { JustifiedGallery } from '@n-ivan/react-justified-gallery';
 
 const images = [
   [
@@ -59,7 +61,6 @@ type GalleryData = ImageData[][];
 | `images` | `ImageData[][]` | **required** | 2D array of image data |
 | `gap` | `number` | `8` | Gap between images in pixels |
 | `renderImage` | `function` | - | Custom render function for images |
-| `resizeDebounce` | `number` | `150` | Debounce delay for resize (ms) |
 | `lazyLoad` | `boolean` | `true` | Enable native lazy loading |
 | `onImageLoad` | `function` | - | Callback when image loads |
 | `onImageError` | `function` | - | Callback when image fails |
@@ -72,30 +73,13 @@ When using the `renderImage` prop, you receive the following properties:
 
 ```typescript
 interface RenderImageProps {
-  image: ImageData;           // Original image data
-  computedWidth: number;      // Calculated width
-  computedHeight: number;     // Calculated height
-  originalWidth: number;      // Original image width
-  originalHeight: number;     // Original image height
-  rowIndex: number;           // Row index (0-based)
-  imageIndex: number;         // Image index in row (0-based)
-  isFirstInRow: boolean;      // First image in row
-  isLastInRow: boolean;       // Last image in row
+  image: ImageData;  // Original image data
+  rowIndex: number;  // Row index (0-based)
+  imageIndex: number; // Image index in row (0-based)
 }
 ```
 
-## How It Works
-
-The component calculates the optimal height for each row based on:
-
-1. **Total aspect ratio** of all images in the row
-2. **Available width** (container width minus gaps)
-3. **Individual aspect ratios** of each image
-
-This ensures:
-- All images in a row have the same height
-- Each image maintains its original aspect ratio
-- The row fills the complete container width
+The wrapper div already has the correct `flex` and `aspect-ratio` styles applied, so your custom content just needs to fill `width: 100%` and `height: 100%`.
 
 ## Development
 
@@ -144,8 +128,8 @@ import type {
 ## Browser Support
 
 Modern browsers with support for:
-- ResizeObserver
-- ES2020+ features
+- CSS `aspect-ratio` property (Chrome 88+, Firefox 89+, Safari 15+, Edge 88+)
+- CSS Flexbox
 - React 18+
 
 ## License

package/dist/JustifiedGallery.d.ts

@@ -1,2 +1,2 @@
 import type { JustifiedGalleryProps } from './types';
-export declare function JustifiedGallery({ images, gap, renderImage, resizeDebounce, lazyLoad, onImageLoad, onImageError, containerStyle, rowStyle, }: JustifiedGalleryProps): import("react/jsx-runtime").JSX.Element;
+export declare function JustifiedGallery({ images, gap, renderImage, lazyLoad, onImageLoad, onImageError, containerStyle, rowStyle, }: JustifiedGalleryProps): import("react/jsx-runtime").JSX.Element;

package/dist/justified-gallery.js

@@ -1,171 +1,76 @@
-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
+import { jsx as r } from "react/jsx-runtime";
+const o = 8;
+function d({
+  images: $,
+  gap: y = o,
+  renderImage: p,
+  lazyLoad: f = !0,
+  onImageLoad: h,
+  onImageError: c,
+  containerStyle: u,
+  rowStyle: a
 }) {
-  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(
+  return /* @__PURE__ */ r(
     "div",
     {
-      ref: a,
       role: "region",
       "aria-label": "Image gallery",
       style: {
         width: "100%",
-        ...c
+        ...u
       },
-      children: f.map((u, r) => /* @__PURE__ */ g(
+      children: $.map((e, l) => /* @__PURE__ */ r(
         "div",
         {
           role: "group",
-          "aria-label": `Gallery row ${r + 1}`,
+          "aria-label": `Gallery row ${l + 1}`,
           style: {
             display: "flex",
-            gap: t,
-            marginBottom: r < f.length - 1 ? t : 0,
-            ...w
+            gap: y,
+            marginBottom: l < $.length - 1 ? y : 0,
+            ...a
           },
-          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(
+          children: e.map((t, i) => {
+            const b = t.width / t.height;
+            return p ? /* @__PURE__ */ r(
               "div",
               {
                 tabIndex: 0,
                 role: "img",
-                "aria-label": p.alt || `Image ${r + 1}-${d + 1}`,
+                "aria-label": t.alt || `Image ${l + 1}-${i + 1}`,
                 style: {
-                  width: b,
-                  height: y,
-                  flexShrink: 0
+                  flex: `${b} 1 0`,
+                  aspectRatio: `${t.width} / ${t.height}`
                 },
-                children: H
+                children: p({ image: t, rowIndex: l, imageIndex: i })
+              },
+              i
+            ) : /* @__PURE__ */ r(
+              "img",
+              {
+                src: t.src,
+                alt: t.alt ?? "",
+                tabIndex: 0,
+                role: "img",
+                "aria-label": t.alt || `Image ${l + 1}-${i + 1}`,
+                loading: f ? "lazy" : void 0,
+                onLoad: (s) => h == null ? void 0 : h(t, s),
+                onError: (s) => c == null ? void 0 : c(t, s),
+                style: {
+                  flex: `${b} 1 0`,
+                  aspectRatio: `${t.width} / ${t.height}`,
+                  objectFit: "cover"
+                }
               },
-              `${r}-${d}`
+              i
             );
           })
         },
-        r
+        l
       ))
     }
   );
 }
 export {
-  P as JustifiedGallery
+  d as JustifiedGallery
 };

package/dist/types.d.ts

@@ -8,32 +8,16 @@ export interface ImageData {
 }
 export interface RenderImageProps {
     image: ImageData;
-    computedWidth: number;
-    computedHeight: number;
-    originalWidth: number;
-    originalHeight: number;
     rowIndex: number;
     imageIndex: number;
-    isFirstInRow: boolean;
-    isLastInRow: boolean;
 }
 export interface JustifiedGalleryProps {
     images: ImageData[][];
     gap?: number;
     renderImage?: (props: RenderImageProps) => ReactNode;
-    resizeDebounce?: number;
     lazyLoad?: boolean;
     onImageLoad?: (image: ImageData, event: SyntheticEvent<HTMLImageElement>) => void;
     onImageError?: (image: ImageData, event: SyntheticEvent<HTMLImageElement>) => void;
     containerStyle?: CSSProperties;
     rowStyle?: CSSProperties;
 }
-export interface ComputedImage {
-    image: ImageData;
-    computedWidth: number;
-    computedHeight: number;
-}
-export interface ComputedRow {
-    images: ComputedImage[];
-    height: number;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@n-ivan/react-justified-gallery",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "A React component for creating justified image galleries",
   "keywords": [
     "react",
@@ -9,7 +9,7 @@
     "images",
     "layout"
   ],
-  "homepage": "https://github.com/n-ivan/react-justified-gallery#readme",
+  "homepage": "https://n-ivan.github.io/react-justified-gallery/",
   "bugs": {
     "url": "https://github.com/n-ivan/react-justified-gallery/issues"
   },
@@ -33,6 +33,7 @@
   ],
   "scripts": {
     "build": "tsc --project tsconfig.build.json && vite build",
+    "build:demo": "vite build --config demo/vite.config.ts",
     "dev": "vite",
     "demo": "vite --config demo/vite.config.ts",
     "test": "vitest",