react-photo-album - npm Package Compare versions

Comparing version 2.2.2 to 2.3.0

dist/index.d.ts

@@ -139,2 +139,4 @@ import * as React from 'react';
     maxPhotos?: number;
+    /** maximum row height when there is not enough photos to fill more than one row */
+    singleRowMaxHeight?: number;
 };
@@ -141,0 +143,0 @@ type ComponentsProps = {

dist/index.js

@@ -0,3 +1,3 @@
+"use client";
 "use strict";
-"use client";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
@@ -340,3 +340,9 @@ const React = require("react");
 function RowsLayout(props) {
-  const { photos, layoutOptions, renderPhoto, renderRowContainer, componentsProps } = props;
+  const {
+    photos,
+    layoutOptions,
+    renderPhoto,
+    renderRowContainer,
+    componentsProps: { imageProps, rowContainerProps }
+  } = props;
   const rowsLayout = computeRowsLayout({ photos, layoutOptions });
@@ -353,3 +359,3 @@ if (!rowsLayout)
       renderRowContainer,
-      rowContainerProps: componentsProps == null ? void 0 : componentsProps.rowContainerProps
+      rowContainerProps
     },
@@ -364,3 +370,3 @@ row.map(({ photo, layout }) => React__namespace.createElement(
         renderPhoto,
-        imageProps: componentsProps == null ? void 0 : componentsProps.imageProps
+        imageProps
       }
@@ -589,3 +595,9 @@ ))
 function ColumnsLayout(props) {
-  const { photos, layoutOptions, renderPhoto, renderColumnContainer, componentsProps } = props;
+  const {
+    photos,
+    layoutOptions,
+    renderPhoto,
+    renderColumnContainer,
+    componentsProps: { imageProps, columnContainerProps }
+  } = props;
   const columnsLayout = computeColumnsLayout({ photos, layoutOptions });
@@ -605,3 +617,3 @@ if (!columnsLayout)
       renderColumnContainer,
-      columnContainerProps: componentsProps == null ? void 0 : componentsProps.columnContainerProps
+      columnContainerProps
     },
@@ -616,3 +628,3 @@ column.map(({ photo, layout }) => React__namespace.createElement(
         renderPhoto,
-        imageProps: componentsProps == null ? void 0 : componentsProps.imageProps
+        imageProps
       }
@@ -662,3 +674,9 @@ ))
 function MasonryLayout(props) {
-  const { photos, layoutOptions, renderPhoto, renderColumnContainer, componentsProps } = props;
+  const {
+    photos,
+    layoutOptions,
+    renderPhoto,
+    renderColumnContainer,
+    componentsProps: { imageProps, columnContainerProps }
+  } = props;
   const masonryLayout = computeMasonryLayout({ photos, layoutOptions });
@@ -675,3 +693,3 @@ if (!masonryLayout)
       renderColumnContainer,
-      columnContainerProps: componentsProps == null ? void 0 : componentsProps.columnContainerProps
+      columnContainerProps
     },
@@ -686,3 +704,3 @@ column.map(({ photo, layout }) => React__namespace.createElement(
         renderPhoto,
-        imageProps: componentsProps == null ? void 0 : componentsProps.imageProps
+        imageProps
       }
@@ -772,4 +790,4 @@ ))
 const breakpoints = Object.freeze([1200, 600, 300, 0]);
-function unwrap(value, containerWidth) {
-  return typeof value === "function" ? value(containerWidth) : value;
+function unwrap(value, arg) {
+  return typeof value === "function" ? value(arg) : value;
 }
@@ -815,8 +833,27 @@ function unwrapParameter(value, containerWidth) {
 }
-function resolveComponentsProps(componentsProps, containerWidth) {
-  return typeof componentsProps === "function" ? componentsProps(containerWidth) : componentsProps;
+function resolveComponentsProps(props, containerWidth, layoutOptions) {
+  const { photos, componentsProps: componentsPropsProp } = props;
+  const componentsProps = unwrap(componentsPropsProp, containerWidth) || {};
+  if (layoutOptions) {
+    const { layout, spacing, padding, rowConstraints } = layoutOptions;
+    if (layout === "rows") {
+      const { singleRowMaxHeight } = rowConstraints || {};
+      if (singleRowMaxHeight) {
+        const maxWidth = Math.floor(
+          photos.reduce(
+            (acc, { width, height }) => acc + width / height * singleRowMaxHeight - 2 * padding,
+            padding * photos.length * 2 + spacing * (photos.length - 1)
+          )
+        );
+        if (maxWidth > 0) {
+          componentsProps.containerProps = componentsProps.containerProps || {};
+          componentsProps.containerProps.style = { maxWidth, ...componentsProps.containerProps.style };
+        }
+      }
+    }
+  }
+  return componentsProps;
 }
-function renderLayout(props, containerWidth, componentsProps) {
+function renderLayout(props, componentsProps, layoutOptions) {
   const { photos, layout, renderPhoto, renderRowContainer, renderColumnContainer } = props;
-  const layoutOptions = resolveLayoutOptions({ containerWidth, ...props });
   const commonLayoutProps = { photos, renderPhoto, componentsProps };
@@ -857,3 +894,4 @@ if (layout === "rows") {
     return null;
-  const componentsProps = resolveComponentsProps(props.componentsProps, containerWidth);
+  const layoutOptions = containerWidth ? resolveLayoutOptions({ containerWidth, ...props }) : void 0;
+  const componentsProps = resolveComponentsProps(props, containerWidth, layoutOptions);
   return React__namespace.createElement(
@@ -865,5 +903,5 @@ ContainerRenderer,
       renderContainer,
-      containerProps: componentsProps == null ? void 0 : componentsProps.containerProps
+      containerProps: componentsProps.containerProps
     },
-    containerWidth ? renderLayout(props, containerWidth, componentsProps) : null
+    layoutOptions && renderLayout(props, componentsProps, layoutOptions)
   );
@@ -870,0 +908,0 @@ }

package.json

 {
     "name": "react-photo-album",
-    "version": "2.2.2",
+    "version": "2.3.0",
     "description": "Responsive photo gallery component for React",
@@ -5,0 +5,0 @@ "author": "Igor Danchenko",

README.md

@@ -11,12 +11,12 @@ # React Photo Album
 [![Bundle Size](https://img.shields.io/bundlephobia/minzip/react-photo-album?color=blue)](https://bundlephobia.com/package/react-photo-album)
-[![License MIT](https://img.shields.io/npm/l/react-photo-album?color=blue)](LICENSE)
+[![License MIT](https://img.shields.io/npm/l/react-photo-album?color=blue)](https://github.com/igordanchenko/react-photo-album/blob/main/LICENSE)
 
-- **Built for React:** works with React 18, 17 and 16.8.0+
-- **SSR friendly:** produces server-side rendered markup that looks pixel perfect on the client even before hydration
-- **Responsive images:** responsive images with automatic resolution switching are supported out of the box
-- **Feature packed:** supports 3 layout options (rows, columns and masonry), responsive images, custom data attributes
-  and is fully configurable and customizable
-- **TypeScript:** type definitions come built-in in the package
-- **Performance:** it was built with performance in mind in order to support large photo albums and silky smooth layout
-  adjustments
+-   **Built for React:** works with React 18, 17 and 16.8.0+
+-   **SSR friendly:** produces server-side rendered markup that looks pixel perfect on the client even before hydration
+-   **Responsive images:** responsive images with automatic resolution switching are supported out of the box
+-   **Feature packed:** supports 3 layout options (rows, columns and masonry), responsive images, custom data attributes
+    and is fully configurable and customizable
+-   **TypeScript:** type definitions come built-in in the package
+-   **Performance:** it was built with performance in mind in order to support large photo albums and silky smooth layout
+    adjustments
 
@@ -59,3 +59,3 @@ ## Layouts
 
-```js
+```tsx
 import PhotoAlbum from "react-photo-album";
@@ -65,3 +65,3 @@
     { src: "/images/image1.jpg", width: 800, height: 600 },
-    { src: "/images/image2.jpg", width: 1600, height: 900 }
+    { src: "/images/image2.jpg", width: 1600, height: 900 },
 ];
@@ -105,6 +105,6 @@
 includes `sizes` and `srcset` image attributes in the server-rendered markup, allowing browsers to pick images of the
-most appropriate resolution depending on their viewport size. To enable images with automatic resolution switching, 
+most appropriate resolution depending on their viewport size. To enable images with automatic resolution switching,
 simply provide smaller images in the photo `srcSet` attribute.
 
-```js
+```tsx
 import PhotoAlbum from "react-photo-album";
@@ -119,4 +119,4 @@
             { src: "/images/image1_400x300.jpg", width: 400, height: 300 },
-            { src: "/images/image1_200x150.jpg", width: 200, height: 150 }
-        ]
+            { src: "/images/image1_200x150.jpg", width: 200, height: 150 },
+        ],
     },
@@ -129,5 +129,5 @@ {
             { src: "/images/image2_800x450.jpg", width: 800, height: 450 },
-            { src: "/images/image2_400x225.jpg", width: 400, height: 225 }
-        ]
-    }
+            { src: "/images/image2_400x225.jpg", width: 400, height: 225 },
+        ],
+    },
 ];
@@ -145,4 +145,4 @@
 this approach, server-side rendered markup looks pixel-perfect on the client even before hydration (or even when
-JavaScript is completely disabled in the browser). To enable server-side rendering, be sure to specify 
-`defaultContainerWidth` prop. Otherwise, React Photo Album produces empty markup on the server and renders on the client 
+JavaScript is completely disabled in the browser). To enable server-side rendering, be sure to specify
+`defaultContainerWidth` prop. Otherwise, React Photo Album produces empty markup on the server and renders on the client
 only after hydration.
@@ -152,5 +152,5 @@
 
-- Thanks to Sandra G (aka [neptunian](https://github.com/neptunian)) for authoring the
-  original [react-photo-gallery](https://github.com/neptunian/react-photo-gallery) library that served as inspiration
-  and foundation for [react-photo-album](https://github.com/igordanchenko/react-photo-album).
+Thanks to Sandra G (aka [neptunian](https://github.com/neptunian)) for authoring the
+original [react-photo-gallery](https://github.com/neptunian/react-photo-gallery) library that served as inspiration
+and foundation for [react-photo-album](https://github.com/igordanchenko/react-photo-album).
 
@@ -157,0 +157,0 @@ ## License

No alert changes

Improved metrics

Total package byte prevSize

84902

increased by1.61%

Lines of code

1971

increased by4.12%

No dependency changes