react-grid-gallery - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1-alpha.0

dist/react-grid-gallery.cjs.js

@@ -163,5 +163,3 @@ 'use strict';
 
-const CheckButton = (props) => {
-    const { isSelected, isVisible, onClick } = props;
-    const { selectedColor, hoverColor, color } = props;
+const CheckButton = ({ isSelected = false, isVisible = true, onClick, color = "#FFFFFFB2", selectedColor = "#4285F4FF", hoverColor = "#FFFFFFFF", }) => {
     const [hover, setHover] = react.useState(false);
@@ -174,16 +172,8 @@ const circleStyle = { display: isSelected ? "block" : "none" };
 };
-CheckButton.defaultProps = {
-    isSelected: false,
-    isVisible: true,
-    color: "#FFFFFFB2",
-    selectedColor: "#4285F4FF",
-    hoverColor: "#FFFFFFFF",
-};
 
-const Image = (props) => {
-    const { item, thumbnailImageComponent: ThumbnailImageComponent } = props;
+const Image = ({ item, thumbnailImageComponent: ThumbnailImageComponent, isSelectable = true, thumbnailStyle, tagStyle, tileViewportStyle, margin, index, onSelect, onClick, }) => {
     const styleContext = { item };
     const [hover, setHover] = react.useState(false);
     const thumbnailProps = {
-        key: props.index,
+        key: index,
         "data-testid": "grid-gallery-item_thumbnail",
@@ -193,54 +183,57 @@ src: item.src,
         title: typeof item.caption === "string" ? item.caption : null,
-        style: getStyle(props.thumbnailStyle, thumbnail, styleContext),
+        style: getStyle(thumbnailStyle, thumbnail, styleContext),
     };
     const handleCheckButtonClick = (event) => {
-        if (!props.isSelectable) {
+        if (!isSelectable) {
             return;
         }
-        props.onSelect(props.index, event);
+        onSelect(index, event);
     };
     const handleViewportClick = (event) => {
-        props.onClick(props.index, event);
+        onClick(index, event);
     };
-    return (jsxRuntime.jsxs("div", { className: "ReactGridGallery_tile", "data-testid": "grid-gallery-item", onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: galleryItem({ margin: props.margin }), children: [jsxRuntime.jsx("div", { className: "ReactGridGallery_tile-icon-bar", style: tileIconBar, children: jsxRuntime.jsx(CheckButton, { isSelected: item.isSelected, isVisible: item.isSelected || (props.isSelectable && hover), onClick: handleCheckButtonClick }) }), !!item.tags && (jsxRuntime.jsx("div", { className: "ReactGridGallery_tile-bottom-bar", style: bottomBar, children: item.tags.map((tag, index) => (jsxRuntime.jsx("div", { title: tag.title, style: tagItemBlock, children: jsxRuntime.jsx("span", { style: getStyle(props.tagStyle, tagItem, styleContext), children: tag.value }) }, tag.key || index))) })), !!item.customOverlay && (jsxRuntime.jsx("div", { className: "ReactGridGallery_custom-overlay", style: customOverlay({ hover }), children: item.customOverlay })), jsxRuntime.jsx("div", { className: "ReactGridGallery_tile-overlay", style: tileOverlay({
-                    showOverlay: hover && !item.isSelected && props.isSelectable,
-                }) }), jsxRuntime.jsx("div", { className: "ReactGridGallery_tile-viewport", "data-testid": "grid-gallery-item_viewport", style: getStyle(props.tileViewportStyle, tileViewport, styleContext), onClick: handleViewportClick, children: ThumbnailImageComponent ? (jsxRuntime.jsx(ThumbnailImageComponent, { ...props, imageProps: thumbnailProps })) : (jsxRuntime.jsx("img", { ...thumbnailProps })) }), item.thumbnailCaption && (jsxRuntime.jsx("div", { className: "ReactGridGallery_tile-description", style: tileDescription, children: item.thumbnailCaption }))] }));
+    const thumbnailImageProps = {
+        item,
+        index,
+        margin,
+        onSelect,
+        onClick,
+        isSelectable,
+        tileViewportStyle,
+        thumbnailStyle,
+        tagStyle,
+    };
+    return (jsxRuntime.jsxs("div", { className: "ReactGridGallery_tile", "data-testid": "grid-gallery-item", onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: galleryItem({ margin }), children: [jsxRuntime.jsx("div", { className: "ReactGridGallery_tile-icon-bar", style: tileIconBar, children: jsxRuntime.jsx(CheckButton, { isSelected: item.isSelected, isVisible: item.isSelected || (isSelectable && hover), onClick: handleCheckButtonClick }) }), !!item.tags && (jsxRuntime.jsx("div", { className: "ReactGridGallery_tile-bottom-bar", style: bottomBar, children: item.tags.map((tag, index) => (jsxRuntime.jsx("div", { title: tag.title, style: tagItemBlock, children: jsxRuntime.jsx("span", { style: getStyle(tagStyle, tagItem, styleContext), children: tag.value }) }, tag.key || index))) })), !!item.customOverlay && (jsxRuntime.jsx("div", { className: "ReactGridGallery_custom-overlay", style: customOverlay({ hover }), children: item.customOverlay })), jsxRuntime.jsx("div", { className: "ReactGridGallery_tile-overlay", style: tileOverlay({
+                    showOverlay: hover && !item.isSelected && isSelectable,
+                }) }), jsxRuntime.jsx("div", { className: "ReactGridGallery_tile-viewport", "data-testid": "grid-gallery-item_viewport", style: getStyle(tileViewportStyle, tileViewport, styleContext), onClick: handleViewportClick, children: ThumbnailImageComponent ? (jsxRuntime.jsx(ThumbnailImageComponent, { ...thumbnailImageProps, imageProps: thumbnailProps })) : (jsxRuntime.jsx("img", { ...thumbnailProps })) }), item.thumbnailCaption && (jsxRuntime.jsx("div", { className: "ReactGridGallery_tile-description", style: tileDescription, children: item.thumbnailCaption }))] }));
 };
-Image.defaultProps = {
-    isSelectable: true,
-};
 
-const objectStyles = {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    height: "100%",
-    width: "100%",
-    pointerEvents: "none",
-    zIndex: -1,
-    opacity: 0,
-};
-const ResizeListener = ({ onResize, }) => {
-    const objectRef = react.useRef(null);
-    const onResizeRef = react.useRef(onResize);
-    onResizeRef.current = onResize;
-    const _onResize = react.useCallback(() => {
-        onResizeRef.current();
-    }, []);
-    const handleLoad = react.useCallback(() => {
-        const obj = objectRef.current;
-        if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
-            obj.contentDocument.defaultView.addEventListener("resize", _onResize);
-        }
-    }, []);
-    react.useEffect(() => {
-        return () => {
-            const obj = objectRef.current;
-            if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
-                obj.contentDocument.defaultView.removeEventListener("resize", _onResize);
+function useContainerWidth(defaultContainerWidth) {
+    const ref = react.useRef(null);
+    const observerRef = react.useRef();
+    const [containerWidth, setContainerWidth] = react.useState(defaultContainerWidth);
+    const containerRef = react.useCallback((node) => {
+        var _a;
+        (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        observerRef.current = undefined;
+        ref.current = node;
+        const updateWidth = () => {
+            if (!ref.current) {
+                return;
             }
+            let width = ref.current.clientWidth;
+            try {
+                width = ref.current.getBoundingClientRect().width;
+            }
+            catch (err) { }
+            setContainerWidth(Math.floor(width));
         };
+        updateWidth();
+        if (node && typeof ResizeObserver !== "undefined") {
+            observerRef.current = new ResizeObserver(updateWidth);
+            observerRef.current.observe(node);
+        }
     }, []);
-    return (jsxRuntime.jsx("object", { onLoad: handleLoad, ref: objectRef, tabIndex: -1, type: "text/html", data: "about:blank", title: "", style: objectStyles }));
-};
+    return { containerRef, containerWidth };
+}
 
@@ -323,21 +316,4 @@ const calculateCutOff = (items, totalRowWidth, protrudingWidth) => {
 
-const Gallery = (props) => {
-    const galleryRef = react.useRef(null);
-    const { maxRows, rowHeight, margin, enableImageSelection } = props;
-    const { defaultContainerWidth, images } = props;
-    const [containerWidth, setContainerWidth] = react.useState(defaultContainerWidth);
-    const handleResize = react.useCallback(() => {
-        if (!galleryRef.current) {
-            return;
-        }
-        let width = galleryRef.current.clientWidth;
-        try {
-            width = galleryRef.current.getBoundingClientRect().width;
-        }
-        catch (err) { }
-        setContainerWidth(Math.floor(width));
-    }, []);
-    react.useEffect(() => {
-        handleResize();
-    }, []);
+const Gallery = ({ images, id = "ReactGridGallery", enableImageSelection = true, onSelect = () => { }, rowHeight = 180, maxRows, margin = 2, defaultContainerWidth = 0, onClick = () => { }, tileViewportStyle, thumbnailStyle, tagStyle, thumbnailImageComponent, }) => {
+    const { containerRef, containerWidth } = useContainerWidth(defaultContainerWidth);
     const thumbnails = buildLayoutFlat(images, {
@@ -351,19 +327,10 @@ containerWidth,
         event.preventDefault();
-        props.onSelect(index, images[index], event);
+        onSelect(index, images[index], event);
     };
     const handleClick = (index, event) => {
-        props.onClick(index, images[index], event);
+        onClick(index, images[index], event);
     };
-    return (jsxRuntime.jsxs("div", { id: props.id, className: "ReactGridGallery", ref: galleryRef, children: [jsxRuntime.jsx(ResizeListener, { onResize: handleResize }), jsxRuntime.jsx("div", { style: gallery, children: thumbnails.map((item, index) => (jsxRuntime.jsx(Image, { item: item, index: index, margin: margin, height: rowHeight, isSelectable: enableImageSelection, onClick: handleClick, onSelect: handleSelect, tagStyle: props.tagStyle, tileViewportStyle: props.tileViewportStyle, thumbnailStyle: props.thumbnailStyle, thumbnailImageComponent: props.thumbnailImageComponent }, item.key || index))) })] }));
+    return (jsxRuntime.jsx("div", { id: id, className: "ReactGridGallery", ref: containerRef, children: jsxRuntime.jsx("div", { style: gallery, children: thumbnails.map((item, index) => (jsxRuntime.jsx(Image, { item: item, index: index, margin: margin, height: rowHeight, isSelectable: enableImageSelection, onClick: handleClick, onSelect: handleSelect, tagStyle: tagStyle, tileViewportStyle: tileViewportStyle, thumbnailStyle: thumbnailStyle, thumbnailImageComponent: thumbnailImageComponent }, item.key || index))) }) }));
 };
 Gallery.displayName = "Gallery";
-Gallery.defaultProps = {
-    id: "ReactGridGallery",
-    enableImageSelection: true,
-    rowHeight: 180,
-    margin: 2,
-    defaultContainerWidth: 0,
-    onClick: () => { },
-    onSelect: () => { },
-};
 
@@ -370,0 +337,0 @@ exports.CheckButton = CheckButton;

dist/react-grid-gallery.d.ts

 import { ReactNode, MouseEvent, CSSProperties, ComponentType } from 'react';
 
-declare type Key = string | number;
+type Key = string | number;
 interface ImageTag {
@@ -23,3 +23,3 @@ value: ReactNode;
 }
-declare type ImageExtended<T extends Image = Image> = T & {
+type ImageExtended<T extends Image = Image> = T & {
     scaledWidth: number;
@@ -36,9 +36,9 @@ scaledHeight: number;
 }
-declare type ImageExtendedRow<T extends Image = Image> = ImageExtended<T>[];
-declare type EventHandler<T extends Image = Image> = (index: number, item: T, event: MouseEvent<HTMLElement>) => void;
-declare type StyleFunctionContext<T extends Image = Image> = {
+type ImageExtendedRow<T extends Image = Image> = ImageExtended<T>[];
+type EventHandler<T extends Image = Image> = (index: number, item: T, event: MouseEvent<HTMLElement>) => void;
+type StyleFunctionContext<T extends Image = Image> = {
     item: T;
 };
-declare type StyleFunction<T extends Image = Image> = (context: StyleFunctionContext) => CSSProperties;
-declare type StyleProp<T extends Image = Image> = CSSProperties | StyleFunction<T>;
+type StyleFunction<T extends Image = Image> = (context: StyleFunctionContext) => CSSProperties;
+type StyleProp<T extends Image = Image> = CSSProperties | StyleFunction<T>;
 interface ImageProps<T extends ImageExtended = ImageExtended> {
@@ -48,3 +48,2 @@ item: T;
     margin: number;
-    height: number;
     isSelectable: boolean;
@@ -56,3 +55,4 @@ onClick: (index: number, event: MouseEvent<HTMLElement>) => void;
     tagStyle: StyleProp<T>;
-    thumbnailImageComponent: ComponentType<ThumbnailImageProps>;
+    height?: number;
+    thumbnailImageComponent?: ComponentType<ThumbnailImageProps>;
 }
@@ -66,3 +66,3 @@ interface ThumbnailImageComponentImageProps {
 }
-declare type ThumbnailImageProps<T extends ImageExtended = ImageExtended> = ImageProps<T> & {
+type ThumbnailImageProps<T extends ImageExtended = ImageExtended> = ImageProps<T> & {
     imageProps: ThumbnailImageComponentImageProps;
@@ -89,31 +89,13 @@ };
     onClick: (event: MouseEvent<HTMLElement>) => void;
-    color: string;
-    selectedColor: string;
-    hoverColor: string;
+    color?: string;
+    selectedColor?: string;
+    hoverColor?: string;
 }
 
 declare const Gallery: {
-    <T extends Image>(props: GalleryProps<T>): JSX.Element;
+    <T extends Image>({ images, id, enableImageSelection, onSelect, rowHeight, maxRows, margin, defaultContainerWidth, onClick, tileViewportStyle, thumbnailStyle, tagStyle, thumbnailImageComponent, }: GalleryProps<T>): JSX.Element;
     displayName: string;
-    defaultProps: {
-        id: string;
-        enableImageSelection: boolean;
-        rowHeight: number;
-        margin: number;
-        defaultContainerWidth: number;
-        onClick: () => void;
-        onSelect: () => void;
-    };
 };
 
-declare const CheckButton: {
-    (props: CheckButtonProps): JSX.Element;
-    defaultProps: {
-        isSelected: boolean;
-        isVisible: boolean;
-        color: string;
-        selectedColor: string;
-        hoverColor: string;
-    };
-};
+declare const CheckButton: ({ isSelected, isVisible, onClick, color, selectedColor, hoverColor, }: CheckButtonProps) => JSX.Element;
 
@@ -120,0 +102,0 @@ declare const buildLayout: <T extends Image = Image>(images: T[], { containerWidth, maxRows, rowHeight, margin }: BuildLayoutOptions) => ImageExtendedRow<T>[];

dist/react-grid-gallery.esm.js

 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback } from 'react';
 
@@ -159,5 +159,3 @@ const getStyle = (styleProp, fallback, context) => {
 
-const CheckButton = (props) => {
-    const { isSelected, isVisible, onClick } = props;
-    const { selectedColor, hoverColor, color } = props;
+const CheckButton = ({ isSelected = false, isVisible = true, onClick, color = "#FFFFFFB2", selectedColor = "#4285F4FF", hoverColor = "#FFFFFFFF", }) => {
     const [hover, setHover] = useState(false);
@@ -170,16 +168,8 @@ const circleStyle = { display: isSelected ? "block" : "none" };
 };
-CheckButton.defaultProps = {
-    isSelected: false,
-    isVisible: true,
-    color: "#FFFFFFB2",
-    selectedColor: "#4285F4FF",
-    hoverColor: "#FFFFFFFF",
-};
 
-const Image = (props) => {
-    const { item, thumbnailImageComponent: ThumbnailImageComponent } = props;
+const Image = ({ item, thumbnailImageComponent: ThumbnailImageComponent, isSelectable = true, thumbnailStyle, tagStyle, tileViewportStyle, margin, index, onSelect, onClick, }) => {
     const styleContext = { item };
     const [hover, setHover] = useState(false);
     const thumbnailProps = {
-        key: props.index,
+        key: index,
         "data-testid": "grid-gallery-item_thumbnail",
@@ -189,54 +179,57 @@ src: item.src,
         title: typeof item.caption === "string" ? item.caption : null,
-        style: getStyle(props.thumbnailStyle, thumbnail, styleContext),
+        style: getStyle(thumbnailStyle, thumbnail, styleContext),
     };
     const handleCheckButtonClick = (event) => {
-        if (!props.isSelectable) {
+        if (!isSelectable) {
             return;
         }
-        props.onSelect(props.index, event);
+        onSelect(index, event);
     };
     const handleViewportClick = (event) => {
-        props.onClick(props.index, event);
+        onClick(index, event);
     };
-    return (jsxs("div", { className: "ReactGridGallery_tile", "data-testid": "grid-gallery-item", onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: galleryItem({ margin: props.margin }), children: [jsx("div", { className: "ReactGridGallery_tile-icon-bar", style: tileIconBar, children: jsx(CheckButton, { isSelected: item.isSelected, isVisible: item.isSelected || (props.isSelectable && hover), onClick: handleCheckButtonClick }) }), !!item.tags && (jsx("div", { className: "ReactGridGallery_tile-bottom-bar", style: bottomBar, children: item.tags.map((tag, index) => (jsx("div", { title: tag.title, style: tagItemBlock, children: jsx("span", { style: getStyle(props.tagStyle, tagItem, styleContext), children: tag.value }) }, tag.key || index))) })), !!item.customOverlay && (jsx("div", { className: "ReactGridGallery_custom-overlay", style: customOverlay({ hover }), children: item.customOverlay })), jsx("div", { className: "ReactGridGallery_tile-overlay", style: tileOverlay({
-                    showOverlay: hover && !item.isSelected && props.isSelectable,
-                }) }), jsx("div", { className: "ReactGridGallery_tile-viewport", "data-testid": "grid-gallery-item_viewport", style: getStyle(props.tileViewportStyle, tileViewport, styleContext), onClick: handleViewportClick, children: ThumbnailImageComponent ? (jsx(ThumbnailImageComponent, { ...props, imageProps: thumbnailProps })) : (jsx("img", { ...thumbnailProps })) }), item.thumbnailCaption && (jsx("div", { className: "ReactGridGallery_tile-description", style: tileDescription, children: item.thumbnailCaption }))] }));
+    const thumbnailImageProps = {
+        item,
+        index,
+        margin,
+        onSelect,
+        onClick,
+        isSelectable,
+        tileViewportStyle,
+        thumbnailStyle,
+        tagStyle,
+    };
+    return (jsxs("div", { className: "ReactGridGallery_tile", "data-testid": "grid-gallery-item", onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: galleryItem({ margin }), children: [jsx("div", { className: "ReactGridGallery_tile-icon-bar", style: tileIconBar, children: jsx(CheckButton, { isSelected: item.isSelected, isVisible: item.isSelected || (isSelectable && hover), onClick: handleCheckButtonClick }) }), !!item.tags && (jsx("div", { className: "ReactGridGallery_tile-bottom-bar", style: bottomBar, children: item.tags.map((tag, index) => (jsx("div", { title: tag.title, style: tagItemBlock, children: jsx("span", { style: getStyle(tagStyle, tagItem, styleContext), children: tag.value }) }, tag.key || index))) })), !!item.customOverlay && (jsx("div", { className: "ReactGridGallery_custom-overlay", style: customOverlay({ hover }), children: item.customOverlay })), jsx("div", { className: "ReactGridGallery_tile-overlay", style: tileOverlay({
+                    showOverlay: hover && !item.isSelected && isSelectable,
+                }) }), jsx("div", { className: "ReactGridGallery_tile-viewport", "data-testid": "grid-gallery-item_viewport", style: getStyle(tileViewportStyle, tileViewport, styleContext), onClick: handleViewportClick, children: ThumbnailImageComponent ? (jsx(ThumbnailImageComponent, { ...thumbnailImageProps, imageProps: thumbnailProps })) : (jsx("img", { ...thumbnailProps })) }), item.thumbnailCaption && (jsx("div", { className: "ReactGridGallery_tile-description", style: tileDescription, children: item.thumbnailCaption }))] }));
 };
-Image.defaultProps = {
-    isSelectable: true,
-};
 
-const objectStyles = {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    height: "100%",
-    width: "100%",
-    pointerEvents: "none",
-    zIndex: -1,
-    opacity: 0,
-};
-const ResizeListener = ({ onResize, }) => {
-    const objectRef = useRef(null);
-    const onResizeRef = useRef(onResize);
-    onResizeRef.current = onResize;
-    const _onResize = useCallback(() => {
-        onResizeRef.current();
-    }, []);
-    const handleLoad = useCallback(() => {
-        const obj = objectRef.current;
-        if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
-            obj.contentDocument.defaultView.addEventListener("resize", _onResize);
-        }
-    }, []);
-    useEffect(() => {
-        return () => {
-            const obj = objectRef.current;
-            if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
-                obj.contentDocument.defaultView.removeEventListener("resize", _onResize);
+function useContainerWidth(defaultContainerWidth) {
+    const ref = useRef(null);
+    const observerRef = useRef();
+    const [containerWidth, setContainerWidth] = useState(defaultContainerWidth);
+    const containerRef = useCallback((node) => {
+        var _a;
+        (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        observerRef.current = undefined;
+        ref.current = node;
+        const updateWidth = () => {
+            if (!ref.current) {
+                return;
             }
+            let width = ref.current.clientWidth;
+            try {
+                width = ref.current.getBoundingClientRect().width;
+            }
+            catch (err) { }
+            setContainerWidth(Math.floor(width));
         };
+        updateWidth();
+        if (node && typeof ResizeObserver !== "undefined") {
+            observerRef.current = new ResizeObserver(updateWidth);
+            observerRef.current.observe(node);
+        }
     }, []);
-    return (jsx("object", { onLoad: handleLoad, ref: objectRef, tabIndex: -1, type: "text/html", data: "about:blank", title: "", style: objectStyles }));
-};
+    return { containerRef, containerWidth };
+}
 
@@ -319,21 +312,4 @@ const calculateCutOff = (items, totalRowWidth, protrudingWidth) => {
 
-const Gallery = (props) => {
-    const galleryRef = useRef(null);
-    const { maxRows, rowHeight, margin, enableImageSelection } = props;
-    const { defaultContainerWidth, images } = props;
-    const [containerWidth, setContainerWidth] = useState(defaultContainerWidth);
-    const handleResize = useCallback(() => {
-        if (!galleryRef.current) {
-            return;
-        }
-        let width = galleryRef.current.clientWidth;
-        try {
-            width = galleryRef.current.getBoundingClientRect().width;
-        }
-        catch (err) { }
-        setContainerWidth(Math.floor(width));
-    }, []);
-    useEffect(() => {
-        handleResize();
-    }, []);
+const Gallery = ({ images, id = "ReactGridGallery", enableImageSelection = true, onSelect = () => { }, rowHeight = 180, maxRows, margin = 2, defaultContainerWidth = 0, onClick = () => { }, tileViewportStyle, thumbnailStyle, tagStyle, thumbnailImageComponent, }) => {
+    const { containerRef, containerWidth } = useContainerWidth(defaultContainerWidth);
     const thumbnails = buildLayoutFlat(images, {
@@ -347,21 +323,12 @@ containerWidth,
         event.preventDefault();
-        props.onSelect(index, images[index], event);
+        onSelect(index, images[index], event);
     };
     const handleClick = (index, event) => {
-        props.onClick(index, images[index], event);
+        onClick(index, images[index], event);
     };
-    return (jsxs("div", { id: props.id, className: "ReactGridGallery", ref: galleryRef, children: [jsx(ResizeListener, { onResize: handleResize }), jsx("div", { style: gallery, children: thumbnails.map((item, index) => (jsx(Image, { item: item, index: index, margin: margin, height: rowHeight, isSelectable: enableImageSelection, onClick: handleClick, onSelect: handleSelect, tagStyle: props.tagStyle, tileViewportStyle: props.tileViewportStyle, thumbnailStyle: props.thumbnailStyle, thumbnailImageComponent: props.thumbnailImageComponent }, item.key || index))) })] }));
+    return (jsx("div", { id: id, className: "ReactGridGallery", ref: containerRef, children: jsx("div", { style: gallery, children: thumbnails.map((item, index) => (jsx(Image, { item: item, index: index, margin: margin, height: rowHeight, isSelectable: enableImageSelection, onClick: handleClick, onSelect: handleSelect, tagStyle: tagStyle, tileViewportStyle: tileViewportStyle, thumbnailStyle: thumbnailStyle, thumbnailImageComponent: thumbnailImageComponent }, item.key || index))) }) }));
 };
 Gallery.displayName = "Gallery";
-Gallery.defaultProps = {
-    id: "ReactGridGallery",
-    enableImageSelection: true,
-    rowHeight: 180,
-    margin: 2,
-    defaultContainerWidth: 0,
-    onClick: () => { },
-    onSelect: () => { },
-};
 
 export { CheckButton, Gallery, buildLayout, buildLayoutFlat };
 //# sourceMappingURL=react-grid-gallery.esm.js.map

dist/react-grid-gallery.umd.js

@@ -47,2 +47,7 @@ (function (global, factory) {
 
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
     var jsxRuntime = {exports: {}};
@@ -72,8 +77,7 @@
 
-    (function (module) {
+    {
+      jsxRuntime.exports = requireReactJsxRuntime_production_min();
+    }
 
-    	{
-    	  module.exports = requireReactJsxRuntime_production_min();
-    	}
-    } (jsxRuntime));
+    var jsxRuntimeExports = jsxRuntime.exports;
 
@@ -249,6 +253,5 @@ var getStyle = function (styleProp, fallback, context) {
 
-    var CheckButton = function (props) {
-        var isSelected = props.isSelected, isVisible = props.isVisible, onClick = props.onClick;
-        var selectedColor = props.selectedColor, hoverColor = props.hoverColor, color = props.color;
-        var _a = require$$0.useState(false), hover = _a[0], setHover = _a[1];
+    var CheckButton = function (_a) {
+        var _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, _c = _a.isVisible, isVisible = _c === void 0 ? true : _c, onClick = _a.onClick, _d = _a.color, color = _d === void 0 ? "#FFFFFFB2" : _d, _e = _a.selectedColor, selectedColor = _e === void 0 ? "#4285F4FF" : _e, _f = _a.hoverColor, hoverColor = _f === void 0 ? "#FFFFFFFF" : _f;
+        var _g = require$$0.useState(false), hover = _g[0], setHover = _g[1];
         var circleStyle = { display: isSelected ? "block" : "none" };
@@ -258,18 +261,11 @@ var fillColor = isSelected ? selectedColor : hover ? hoverColor : color;
         var handleMouseOut = function () { return setHover(false); };
-        return (jsxRuntime.exports.jsx("div", __assign({ "data-testid": "grid-gallery-item_check-button", title: "Select", style: checkButton({ isVisible: isVisible }), onClick: onClick, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut }, { children: jsxRuntime.exports.jsxs("svg", __assign({ fill: fillColor, height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.exports.jsxs("radialGradient", __assign({ id: "shadow", cx: "38", cy: "95.488", r: "10.488", gradientTransform: "matrix(1 0 0 -1 -26 109)", gradientUnits: "userSpaceOnUse" }, { children: [jsxRuntime.exports.jsx("stop", { offset: ".832", stopColor: "#010101" }), jsxRuntime.exports.jsx("stop", { offset: "1", stopColor: "#010101", stopOpacity: "0" })] })), jsxRuntime.exports.jsx("circle", { style: circleStyle, opacity: ".26", fill: "url(#shadow)", cx: "12", cy: "13.512", r: "10.488" }), jsxRuntime.exports.jsx("circle", { style: circleStyle, fill: "#FFF", cx: "12", cy: "12.2", r: "8.292" }), jsxRuntime.exports.jsx("path", { d: "M0 0h24v24H0z", fill: "none" }), jsxRuntime.exports.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })] })) })));
+        return (jsxRuntimeExports.jsx("div", __assign({ "data-testid": "grid-gallery-item_check-button", title: "Select", style: checkButton({ isVisible: isVisible }), onClick: onClick, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut }, { children: jsxRuntimeExports.jsxs("svg", __assign({ fill: fillColor, height: "24", viewBox: "0 0 24 24", width: "24", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntimeExports.jsxs("radialGradient", __assign({ id: "shadow", cx: "38", cy: "95.488", r: "10.488", gradientTransform: "matrix(1 0 0 -1 -26 109)", gradientUnits: "userSpaceOnUse" }, { children: [jsxRuntimeExports.jsx("stop", { offset: ".832", stopColor: "#010101" }), jsxRuntimeExports.jsx("stop", { offset: "1", stopColor: "#010101", stopOpacity: "0" })] })), jsxRuntimeExports.jsx("circle", { style: circleStyle, opacity: ".26", fill: "url(#shadow)", cx: "12", cy: "13.512", r: "10.488" }), jsxRuntimeExports.jsx("circle", { style: circleStyle, fill: "#FFF", cx: "12", cy: "12.2", r: "8.292" }), jsxRuntimeExports.jsx("path", { d: "M0 0h24v24H0z", fill: "none" }), jsxRuntimeExports.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })] })) })));
     };
-    CheckButton.defaultProps = {
-        isSelected: false,
-        isVisible: true,
-        color: "#FFFFFFB2",
-        selectedColor: "#4285F4FF",
-        hoverColor: "#FFFFFFFF",
-    };
 
-    var Image = function (props) {
-        var item = props.item, ThumbnailImageComponent = props.thumbnailImageComponent;
+    var Image = function (_a) {
+        var item = _a.item, ThumbnailImageComponent = _a.thumbnailImageComponent, _b = _a.isSelectable, isSelectable = _b === void 0 ? true : _b, thumbnailStyle = _a.thumbnailStyle, tagStyle = _a.tagStyle, tileViewportStyle = _a.tileViewportStyle, margin = _a.margin, index = _a.index, onSelect = _a.onSelect, onClick = _a.onClick;
         var styleContext = { item: item };
-        var _a = require$$0.useState(false), hover = _a[0], setHover = _a[1];
+        var _c = require$$0.useState(false), hover = _c[0], setHover = _c[1];
         var thumbnailProps = {
-            key: props.index,
+            key: index,
             "data-testid": "grid-gallery-item_thumbnail",
@@ -279,55 +275,57 @@ src: item.src,
             title: typeof item.caption === "string" ? item.caption : null,
-            style: getStyle(props.thumbnailStyle, thumbnail, styleContext),
+            style: getStyle(thumbnailStyle, thumbnail, styleContext),
         };
         var handleCheckButtonClick = function (event) {
-            if (!props.isSelectable) {
+            if (!isSelectable) {
                 return;
             }
-            props.onSelect(props.index, event);
+            onSelect(index, event);
         };
         var handleViewportClick = function (event) {
-            props.onClick(props.index, event);
+            onClick(index, event);
         };
-        return (jsxRuntime.exports.jsxs("div", __assign({ className: "ReactGridGallery_tile", "data-testid": "grid-gallery-item", onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, style: galleryItem({ margin: props.margin }) }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: "ReactGridGallery_tile-icon-bar", style: tileIconBar }, { children: jsxRuntime.exports.jsx(CheckButton, { isSelected: item.isSelected, isVisible: item.isSelected || (props.isSelectable && hover), onClick: handleCheckButtonClick }) })), !!item.tags && (jsxRuntime.exports.jsx("div", __assign({ className: "ReactGridGallery_tile-bottom-bar", style: bottomBar }, { children: item.tags.map(function (tag, index) { return (jsxRuntime.exports.jsx("div", __assign({ title: tag.title, style: tagItemBlock }, { children: jsxRuntime.exports.jsx("span", __assign({ style: getStyle(props.tagStyle, tagItem, styleContext) }, { children: tag.value })) }), tag.key || index)); }) }))), !!item.customOverlay && (jsxRuntime.exports.jsx("div", __assign({ className: "ReactGridGallery_custom-overlay", style: customOverlay({ hover: hover }) }, { children: item.customOverlay }))), jsxRuntime.exports.jsx("div", { className: "ReactGridGallery_tile-overlay", style: tileOverlay({
-                        showOverlay: hover && !item.isSelected && props.isSelectable,
-                    }) }), jsxRuntime.exports.jsx("div", __assign({ className: "ReactGridGallery_tile-viewport", "data-testid": "grid-gallery-item_viewport", style: getStyle(props.tileViewportStyle, tileViewport, styleContext), onClick: handleViewportClick }, { children: ThumbnailImageComponent ? (jsxRuntime.exports.jsx(ThumbnailImageComponent, __assign({}, props, { imageProps: thumbnailProps }))) : (jsxRuntime.exports.jsx("img", __assign({}, thumbnailProps))) })), item.thumbnailCaption && (jsxRuntime.exports.jsx("div", __assign({ className: "ReactGridGallery_tile-description", style: tileDescription }, { children: item.thumbnailCaption })))] })));
+        var thumbnailImageProps = {
+            item: item,
+            index: index,
+            margin: margin,
+            onSelect: onSelect,
+            onClick: onClick,
+            isSelectable: isSelectable,
+            tileViewportStyle: tileViewportStyle,
+            thumbnailStyle: thumbnailStyle,
+            tagStyle: tagStyle,
+        };
+        return (jsxRuntimeExports.jsxs("div", __assign({ className: "ReactGridGallery_tile", "data-testid": "grid-gallery-item", onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, style: galleryItem({ margin: margin }) }, { children: [jsxRuntimeExports.jsx("div", __assign({ className: "ReactGridGallery_tile-icon-bar", style: tileIconBar }, { children: jsxRuntimeExports.jsx(CheckButton, { isSelected: item.isSelected, isVisible: item.isSelected || (isSelectable && hover), onClick: handleCheckButtonClick }) })), !!item.tags && (jsxRuntimeExports.jsx("div", __assign({ className: "ReactGridGallery_tile-bottom-bar", style: bottomBar }, { children: item.tags.map(function (tag, index) { return (jsxRuntimeExports.jsx("div", __assign({ title: tag.title, style: tagItemBlock }, { children: jsxRuntimeExports.jsx("span", __assign({ style: getStyle(tagStyle, tagItem, styleContext) }, { children: tag.value })) }), tag.key || index)); }) }))), !!item.customOverlay && (jsxRuntimeExports.jsx("div", __assign({ className: "ReactGridGallery_custom-overlay", style: customOverlay({ hover: hover }) }, { children: item.customOverlay }))), jsxRuntimeExports.jsx("div", { className: "ReactGridGallery_tile-overlay", style: tileOverlay({
+                        showOverlay: hover && !item.isSelected && isSelectable,
+                    }) }), jsxRuntimeExports.jsx("div", __assign({ className: "ReactGridGallery_tile-viewport", "data-testid": "grid-gallery-item_viewport", style: getStyle(tileViewportStyle, tileViewport, styleContext), onClick: handleViewportClick }, { children: ThumbnailImageComponent ? (jsxRuntimeExports.jsx(ThumbnailImageComponent, __assign({}, thumbnailImageProps, { imageProps: thumbnailProps }))) : (jsxRuntimeExports.jsx("img", __assign({}, thumbnailProps))) })), item.thumbnailCaption && (jsxRuntimeExports.jsx("div", __assign({ className: "ReactGridGallery_tile-description", style: tileDescription }, { children: item.thumbnailCaption })))] })));
     };
-    Image.defaultProps = {
-        isSelectable: true,
-    };
 
-    var objectStyles = {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        height: "100%",
-        width: "100%",
-        pointerEvents: "none",
-        zIndex: -1,
-        opacity: 0,
-    };
-    var ResizeListener = function (_a) {
-        var onResize = _a.onResize;
-        var objectRef = require$$0.useRef(null);
-        var onResizeRef = require$$0.useRef(onResize);
-        onResizeRef.current = onResize;
-        var _onResize = require$$0.useCallback(function () {
-            onResizeRef.current();
-        }, []);
-        var handleLoad = require$$0.useCallback(function () {
-            var obj = objectRef.current;
-            if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
-                obj.contentDocument.defaultView.addEventListener("resize", _onResize);
-            }
-        }, []);
-        require$$0.useEffect(function () {
-            return function () {
-                var obj = objectRef.current;
-                if (obj && obj.contentDocument && obj.contentDocument.defaultView) {
-                    obj.contentDocument.defaultView.removeEventListener("resize", _onResize);
+    function useContainerWidth(defaultContainerWidth) {
+        var ref = require$$0.useRef(null);
+        var observerRef = require$$0.useRef();
+        var _a = require$$0.useState(defaultContainerWidth), containerWidth = _a[0], setContainerWidth = _a[1];
+        var containerRef = require$$0.useCallback(function (node) {
+            var _a;
+            (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+            observerRef.current = undefined;
+            ref.current = node;
+            var updateWidth = function () {
+                if (!ref.current) {
+                    return;
                 }
+                var width = ref.current.clientWidth;
+                try {
+                    width = ref.current.getBoundingClientRect().width;
+                }
+                catch (err) { }
+                setContainerWidth(Math.floor(width));
             };
+            updateWidth();
+            if (node && typeof ResizeObserver !== "undefined") {
+                observerRef.current = new ResizeObserver(updateWidth);
+                observerRef.current.observe(node);
+            }
         }, []);
-        return (jsxRuntime.exports.jsx("object", { onLoad: handleLoad, ref: objectRef, tabIndex: -1, type: "text/html", data: "about:blank", title: "", style: objectStyles }));
-    };
+        return { containerRef: containerRef, containerWidth: containerWidth };
+    }
 
@@ -407,21 +405,5 @@ var calculateCutOff = function (items, totalRowWidth, protrudingWidth) {
 
-    var Gallery = function (props) {
-        var galleryRef = require$$0.useRef(null);
-        var maxRows = props.maxRows, rowHeight = props.rowHeight, margin = props.margin, enableImageSelection = props.enableImageSelection;
-        var defaultContainerWidth = props.defaultContainerWidth, images = props.images;
-        var _a = require$$0.useState(defaultContainerWidth), containerWidth = _a[0], setContainerWidth = _a[1];
-        var handleResize = require$$0.useCallback(function () {
-            if (!galleryRef.current) {
-                return;
-            }
-            var width = galleryRef.current.clientWidth;
-            try {
-                width = galleryRef.current.getBoundingClientRect().width;
-            }
-            catch (err) { }
-            setContainerWidth(Math.floor(width));
-        }, []);
-        require$$0.useEffect(function () {
-            handleResize();
-        }, []);
+    var Gallery = function (_a) {
+        var images = _a.images, _b = _a.id, id = _b === void 0 ? "ReactGridGallery" : _b, _c = _a.enableImageSelection, enableImageSelection = _c === void 0 ? true : _c, _d = _a.onSelect, onSelect = _d === void 0 ? function () { } : _d, _e = _a.rowHeight, rowHeight = _e === void 0 ? 180 : _e, maxRows = _a.maxRows, _f = _a.margin, margin = _f === void 0 ? 2 : _f, _g = _a.defaultContainerWidth, defaultContainerWidth = _g === void 0 ? 0 : _g, _h = _a.onClick, onClick = _h === void 0 ? function () { } : _h, tileViewportStyle = _a.tileViewportStyle, thumbnailStyle = _a.thumbnailStyle, tagStyle = _a.tagStyle, thumbnailImageComponent = _a.thumbnailImageComponent;
+        var _j = useContainerWidth(defaultContainerWidth), containerRef = _j.containerRef, containerWidth = _j.containerWidth;
         var thumbnails = buildLayoutFlat(images, {
@@ -435,19 +417,10 @@ containerWidth: containerWidth,
             event.preventDefault();
-            props.onSelect(index, images[index], event);
+            onSelect(index, images[index], event);
         };
         var handleClick = function (index, event) {
-            props.onClick(index, images[index], event);
+            onClick(index, images[index], event);
         };
-        return (jsxRuntime.exports.jsxs("div", __assign({ id: props.id, className: "ReactGridGallery", ref: galleryRef }, { children: [jsxRuntime.exports.jsx(ResizeListener, { onResize: handleResize }), jsxRuntime.exports.jsx("div", __assign({ style: gallery }, { children: thumbnails.map(function (item, index) { return (jsxRuntime.exports.jsx(Image, { item: item, index: index, margin: margin, height: rowHeight, isSelectable: enableImageSelection, onClick: handleClick, onSelect: handleSelect, tagStyle: props.tagStyle, tileViewportStyle: props.tileViewportStyle, thumbnailStyle: props.thumbnailStyle, thumbnailImageComponent: props.thumbnailImageComponent }, item.key || index)); }) }))] })));
+        return (jsxRuntimeExports.jsx("div", __assign({ id: id, className: "ReactGridGallery", ref: containerRef }, { children: jsxRuntimeExports.jsx("div", __assign({ style: gallery }, { children: thumbnails.map(function (item, index) { return (jsxRuntimeExports.jsx(Image, { item: item, index: index, margin: margin, height: rowHeight, isSelectable: enableImageSelection, onClick: handleClick, onSelect: handleSelect, tagStyle: tagStyle, tileViewportStyle: tileViewportStyle, thumbnailStyle: thumbnailStyle, thumbnailImageComponent: thumbnailImageComponent }, item.key || index)); }) })) })));
     };
     Gallery.displayName = "Gallery";
-    Gallery.defaultProps = {
-        id: "ReactGridGallery",
-        enableImageSelection: true,
-        rowHeight: 180,
-        margin: 2,
-        defaultContainerWidth: 0,
-        onClick: function () { },
-        onSelect: function () { },
-    };
 
@@ -454,0 +427,0 @@ exports.CheckButton = CheckButton;

package.json

 {
   "name": "react-grid-gallery",
-  "version": "1.0.0",
+  "version": "1.0.1-alpha.0",
   "description": "Justified gallery component for React.",
@@ -22,3 +22,3 @@ "types": "dist/react-grid-gallery.d.ts",
     "prepublishOnly": "npm run build",
-    "clean": "rimraf dist",
+    "clean": "rimraf dist && rimraf node_modules/.cache",
     "rollup:build": "rollup -c",
@@ -35,29 +35,29 @@ "watch": "rollup -c -w",
   "devDependencies": {
-    "@babel/core": "^7.18.13",
-    "@babel/preset-env": "^7.18.10",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
-    "@types/jest": "^29.0.0",
-    "@types/jest-environment-puppeteer": "^5.0.2",
-    "@types/jest-image-snapshot": "^5.1.0",
-    "@types/react": "^18.0.18",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^29.0.1",
-    "jest-image-snapshot": "^5.1.1",
-    "jest-puppeteer": "^6.1.1",
-    "puppeteer": "^17.0.0",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.5",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/jest-environment-puppeteer": "^5.0.4",
+    "@types/jest-image-snapshot": "^6.2.1",
+    "@types/react": "^18.2.28",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-image-snapshot": "^6.2.0",
+    "jest-puppeteer": "^9.0.1",
+    "puppeteer": "^21.3.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.79.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^2.79.1",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "rollup-plugin-typescript2": "^0.33.0",
+    "rollup-plugin-typescript2": "^0.36.0",
     "typescript": "^4.8.2"
@@ -64,0 +64,0 @@ },

README.md

@@ -7,3 +7,3 @@ # React Grid Gallery
 
-There are breaking changes with v0.5.x, check out the [migration guide](https://github.com/benhowell/react-grid-gallery/UPGRADE_GUIDE.md) to learn more. Documentation for v0.5.x is [here](https://github.com/benhowell/react-grid-gallery/tree/v0.5.6).
+There are breaking changes with v0.5.x, check out the [migration guide](https://github.com/benhowell/react-grid-gallery/blob/master/UPGRADE_GUIDE.md) to learn more. Documentation for v0.5.x is [here](https://github.com/benhowell/react-grid-gallery/tree/v0.5.6).
 
@@ -13,8 +13,8 @@ ## Live Demo & Examples
 https://benhowell.github.io/react-grid-gallery/
-* [Main Demo](https://benhowell.github.io/react-grid-gallery/#demo)
-* [Pre-selected Images](https://benhowell.github.io/react-grid-gallery/#pre-selected-images)
-* [Permanently Selected Images](https://benhowell.github.io/react-grid-gallery/#permanently-selected-images)
-* [Simple Gallery](https://benhowell.github.io/react-grid-gallery/#simple-gallery)
-* [Custom Overlay](https://benhowell.github.io/react-grid-gallery/#custom-overlay)
-* [Thumbnail Captions](https://benhowell.github.io/react-grid-gallery/#thumbnail-caption)
+* [Image Selection](https://benhowell.github.io/react-grid-gallery/examples/selection)
+* [Custom Overlay](https://benhowell.github.io/react-grid-gallery/examples/custom-overlay)
+* [Thumbnail Captions](https://benhowell.github.io/react-grid-gallery/examples/captions)
+* [Custom Image Component](https://benhowell.github.io/react-grid-gallery/examples/custom-image-component)
+* [Lightbox integration `react-image-lightbox`](https://benhowell.github.io/react-grid-gallery/examples/with-react-image-lightbox)
+* [Lightbox integration `yet-another-react-lightbox`](https://benhowell.github.io/react-grid-gallery/examples/with-yet-another-react-lightbox)
 
@@ -53,3 +53,2 @@
    },
-
    {
@@ -120,2 +119,3 @@ src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg",
 ### Acknowledgements
+ * [itoldya](https://github.com/itoldya) for the large overhaul of the code base to bring the library to its v1 release.
 
@@ -156,3 +156,5 @@ * Visual design inspired by [Google Photos](https://photos.google.com/).
 
+* [kym6464](https://github.com/kym6464) for replacing deprecated defaultProps and for clearing of rollup cache on build [PR #298](https://github.com/benhowell/react-grid-gallery/pull/298)
 
+
  * Demo stock photos:
@@ -159,0 +161,0 @@ * [Jeshu John - designerspics.com](https://designerspics.com)

src/types.ts

@@ -64,3 +64,2 @@ import { MouseEvent, CSSProperties, ReactNode, ComponentType } from "react";
   margin: number;
-  height: number;
   isSelectable: boolean;
@@ -72,3 +71,4 @@ onClick: (index: number, event: MouseEvent<HTMLElement>) => void;
   tagStyle: StyleProp<T>;
-  thumbnailImageComponent: ComponentType<ThumbnailImageProps>;
+  height?: number;
+  thumbnailImageComponent?: ComponentType<ThumbnailImageProps>;
 }
@@ -109,5 +109,5 @@
   onClick: (event: MouseEvent<HTMLElement>) => void;
-  color: string;
-  selectedColor: string;
-  hoverColor: string;
+  color?: string;
+  selectedColor?: string;
+  hoverColor?: string;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

163

increased by1.24%

Worsened metrics

Total package byte prevSize

192768

decreased by-10.08%

Lines of code

1825

decreased by-6.94%

Number of low quality alerts

1

increased byInfinity%

No dependency changes