react-photo-album - npm Package Compare versions

Comparing version 2.0.0-rc.7 to 2.0.0-rc.8

dist/index.d.ts

 import * as React from 'react';
 
-declare type LayoutType = "columns" | "rows" | "masonry";
-declare type ClickHandler<T extends Photo = Photo> = ({ event, photo, index, }: {
+type LayoutType = "columns" | "rows" | "masonry";
+type ClickHandler<T extends Photo = Photo> = ({ event, photo, index, }: {
     event: React.MouseEvent;
@@ -9,5 +9,5 @@ photo: T;
 }) => void;
-declare type ResponsiveParameterProvider<T = number> = (containerWidth: number) => T;
-declare type ResponsiveParameter<T = number> = T | ResponsiveParameterProvider<T>;
-declare type ResponsiveSizes = {
+type ResponsiveParameterProvider<T = number> = (containerWidth: number) => T;
+type ResponsiveParameter<T = number> = T | ResponsiveParameterProvider<T>;
+type ResponsiveSizes = {
     /** default size e.g. 100vw or calc(100vw - 200px) */
@@ -41,3 +41,3 @@ size: string;
 }
-declare type PhotoLayout = {
+type PhotoLayout = {
     /** rendered photo width */
@@ -54,3 +54,3 @@ width: number;
 };
-declare type PhotoProps<T extends Photo = Photo> = {
+type RenderPhotoProps<T extends Photo = Photo> = {
     /** photo object */
@@ -73,3 +73,3 @@ photo: T;
 };
-declare type PhotoAlbumProps<T extends Photo = Photo> = {
+type PhotoAlbumProps<T extends Photo = Photo> = {
     /** An array of photos to display in the photo album. */
@@ -108,4 +108,4 @@ photos: Array<T>;
 };
-declare type RenderPhoto<T extends Photo = Photo> = (props: PhotoProps<T>) => React.ReactNode;
-declare type GenericLayoutOptions<T extends Photo = Photo> = {
+type RenderPhoto<T extends Photo = Photo> = (props: RenderPhotoProps<T>) => React.ReactNode;
+type GenericLayoutOptions<T extends Photo = Photo> = {
     /** layout spacing (gaps between photos) */
@@ -122,3 +122,3 @@ spacing: number;
 };
-declare type RowsLayoutOptions<T extends Photo = Photo> = GenericLayoutOptions<T> & {
+type RowsLayoutOptions<T extends Photo = Photo> = GenericLayoutOptions<T> & {
     /** layout type */
@@ -131,3 +131,3 @@ layout: Extract<LayoutType, "rows">;
 };
-declare type ColumnsLayoutOptions<T extends Photo = Photo> = GenericLayoutOptions<T> & {
+type ColumnsLayoutOptions<T extends Photo = Photo> = GenericLayoutOptions<T> & {
     /** layout type */
@@ -138,4 +138,4 @@ layout: Extract<LayoutType, "columns" | "masonry">;
 };
-declare type LayoutOptions<T extends Photo = Photo> = ColumnsLayoutOptions<T> | RowsLayoutOptions<T>;
-declare type ComponentsProps = {
+type LayoutOptions<T extends Photo = Photo> = ColumnsLayoutOptions<T> | RowsLayoutOptions<T>;
+type ComponentsProps = {
     /** Additional HTML attributes to be passed to the outer container `div` element */
@@ -150,4 +150,4 @@ containerProps?: React.HTMLAttributes<HTMLDivElement>;
 };
-declare type ComponentsPropsParameter = ComponentsProps | ((containerWidth?: number) => ComponentsProps);
-declare type ContainerProps = {
+type ComponentsPropsParameter = ComponentsProps | ((containerWidth?: number) => ComponentsProps);
+type RenderContainerProps = React.PropsWithChildren<{
     /** layout type */
@@ -159,6 +159,5 @@ layout: LayoutType;
     containerRef?: React.RefCallback<HTMLDivElement>;
-};
-declare type RenderContainerProps = React.PropsWithChildren<ContainerProps>;
-declare type RenderContainer = (props: RenderContainerProps) => React.ReactNode;
-declare type RowContainerProps<T extends Photo = Photo> = {
+}>;
+type RenderContainer = (props: RenderContainerProps) => React.ReactNode;
+type RowContainerProps<T extends Photo = Photo> = {
     /** layout options */
@@ -173,4 +172,4 @@ layoutOptions: RowsLayoutOptions<T>;
 };
-declare type RenderRowContainer<T extends Photo = Photo> = (props: React.PropsWithChildren<RowContainerProps<T>>) => React.ReactNode;
-declare type ColumnContainerProps<T extends Photo = Photo> = {
+type RenderRowContainer<T extends Photo = Photo> = (props: React.PropsWithChildren<RowContainerProps<T>>) => React.ReactNode;
+type ColumnContainerProps<T extends Photo = Photo> = {
     layoutOptions: ColumnsLayoutOptions<T>;
@@ -188,4 +187,4 @@ /** column number */
 };
-declare type RenderColumnContainer<T extends Photo = Photo> = (props: React.PropsWithChildren<ColumnContainerProps<T>>) => React.ReactNode;
-declare type RowConstraints = {
+type RenderColumnContainer<T extends Photo = Photo> = (props: React.PropsWithChildren<ColumnContainerProps<T>>) => React.ReactNode;
+type RowConstraints = {
     /** minimum number of photos per row in 'rows' layout */
@@ -199,2 +198,2 @@ minPhotos?: number;
 
-export { ClickHandler, ColumnContainerProps, ColumnsLayoutOptions, ComponentsProps, ComponentsPropsParameter, ContainerProps, GenericLayoutOptions, Image, LayoutOptions, LayoutType, Photo, PhotoAlbum, PhotoAlbumProps, PhotoLayout, PhotoProps, RenderColumnContainer, RenderContainer, RenderContainerProps, RenderPhoto, RenderRowContainer, ResponsiveParameter, ResponsiveParameterProvider, ResponsiveSizes, RowConstraints, RowContainerProps, RowsLayoutOptions, PhotoAlbum as default };
+export { ClickHandler, ColumnContainerProps, ColumnsLayoutOptions, ComponentsProps, ComponentsPropsParameter, GenericLayoutOptions, Image, LayoutOptions, LayoutType, Photo, PhotoAlbum, PhotoAlbumProps, PhotoLayout, RenderColumnContainer, RenderContainer, RenderContainerProps, RenderPhoto, RenderPhotoProps, RenderRowContainer, ResponsiveParameter, ResponsiveParameterProvider, ResponsiveSizes, RowConstraints, RowContainerProps, RowsLayoutOptions, PhotoAlbum as default };

package.json

 {
     "name": "react-photo-album",
-    "version": "2.0.0-rc.7",
+    "version": "2.0.0-rc.8",
     "description": "Responsive photo gallery component for React",
@@ -46,3 +46,3 @@ "author": "Igor Danchenko",
         "@commitlint/config-conventional": "^17.2.0",
-        "@playwright/experimental-ct-react": "^1.27.1",
+        "@playwright/experimental-ct-react": "^1.28.0",
         "@rollup/plugin-node-resolve": "^15.0.1",
@@ -52,8 +52,8 @@ "@rollup/plugin-typescript": "^9.0.2",
         "@semantic-release/github": "^8.0.6",
-        "@types/jest": "^29.2.2",
+        "@types/jest": "^29.2.3",
         "@types/react": "^18.0.25",
-        "@types/react-dom": "^18.0.8",
+        "@types/react-dom": "^18.0.9",
         "@types/react-test-renderer": "^18.0.0",
-        "@typescript-eslint/eslint-plugin": "^5.42.0",
-        "@typescript-eslint/parser": "^5.42.0",
+        "@typescript-eslint/eslint-plugin": "^5.43.0",
+        "@typescript-eslint/parser": "^5.43.0",
         "eslint": "^8.27.0",
@@ -65,5 +65,5 @@ "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "husky": "^8.0.1",
-        "jest": "^29.2.2",
-        "jest-environment-jsdom": "^29.2.2",
+        "husky": "^8.0.2",
+        "jest": "^29.3.1",
+        "jest-environment-jsdom": "^29.3.1",
         "lint-staged": "^13.0.3",
@@ -76,7 +76,7 @@ "npm-run-all": "^4.1.5",
         "rimraf": "^3.0.2",
-        "rollup": "^3.2.5",
+        "rollup": "^3.3.0",
         "rollup-plugin-dts": "^5.0.0",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "ts-jest": "^29.0.3",
-        "typescript": "^4.8.4"
+        "typescript": "^4.9.3"
     },
@@ -83,0 +83,0 @@ "keywords": [

README.md

@@ -36,4 +36,2 @@ # React Photo Album
 
-All examples are available on [CodeSandbox](https://codesandbox.io/examples/package/react-photo-album).
-
 ## Documentation
@@ -43,2 +41,6 @@
 
+## Examples
+
+[https://react-photo-album.com/examples](https://react-photo-album.com/examples)
+
 ## Installation
@@ -58,3 +60,3 @@
 
-```javascript
+```js
 import PhotoAlbum from "react-photo-album";
@@ -75,3 +77,3 @@
 
-<PhotoAlbum layout="rows" photos={photos} />
+<PhotoAlbum layout="rows" photos={photos}/>
 ```
@@ -118,6 +120,6 @@
 JavaScript is completely disabled in the browser). React Photo Album calculates `spacing`, `padding`, `columns`, and
-other responsive parameters on the server-side using the `defaultContainerWidth` value, which is set to 800px by
-default. Keep in mind that responsive parameters may contribute to cumulative layout shifts during the initial page
-load. If CLS becomes an issue in your case, you may want to consider using hard-coded values for `columns`, `spacing`
-, `padding`, etc., instead of the default responsive values.
+other responsive parameters on the server-side using the `defaultContainerWidth` value. Keep in mind that responsive
+parameters may contribute to cumulative layout shifts during the initial page load. If CLS becomes an issue in your
+case, you may want to consider using hard-coded values for `columns`, `spacing`, `padding`, etc., instead of the default
+responsive values.
 
@@ -124,0 +126,0 @@ ## Credits

No alert changes

Improved metrics

Number of lines in readme file

130

increased by1.56%

Worsened metrics

Total package byte prevSize

79624

decreased by-0.34%

Lines of code

1475

decreased by-0.07%

No dependency changes