Merge pull request #308 from benhowell/fix-resize-in-safari

Fix horizontal filling after resizing in Arc and Safari

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grid-gallery",
-  "version": "1.0.0",
+  "version": "1.0.1-alpha.0",
   "description": "Justified gallery component for React.",
   "types": "dist/react-grid-gallery.d.ts",
   "main": "dist/react-grid-gallery.cjs.js",

src/Gallery.tsx

@@ -1,6 +1,6 @@
-import { useState, useEffect, useCallback, useRef, MouseEvent } from "react";
+import { MouseEvent } from "react";
 import { Image } from "./Image";
-import { ResizeListener } from "./ResizeListener";
+import { useContainerWidth } from "./useContainerWidth";
 import { buildLayoutFlat } from "./buildLayout";
 import { Image as ImageInterface, GalleryProps } from "./types";
 import * as styles from "./styles";
@@ -20,24 +20,9 @@ export const Gallery = <T extends ImageInterface>({
   tagStyle,
   thumbnailImageComponent,
 }: GalleryProps<T>): JSX.Element => {
-  const galleryRef = useRef(null);
-
-  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 { containerRef, containerWidth } = useContainerWidth(
+    defaultContainerWidth
+  );
 
   const thumbnails = buildLayoutFlat<T>(images, {
     containerWidth,
@@ -56,8 +41,7 @@ export const Gallery = <T extends ImageInterface>({
   };
 
   return (
-    <div id={id} className="ReactGridGallery" ref={galleryRef}>
-      <ResizeListener onResize={handleResize} />
+    <div id={id} className="ReactGridGallery" ref={containerRef}>
       <div style={styles.gallery}>
         {thumbnails.map((item, index) => (
           <Image

src/useContainerWidth.ts

@@ -0,0 +1,35 @@
+import { useRef, useCallback, useState } from "react";
+
+export function useContainerWidth(defaultContainerWidth: number) {
+  const ref = useRef<HTMLElement | null>(null);
+  const observerRef = useRef<ResizeObserver>();
+
+  const [containerWidth, setContainerWidth] = useState(defaultContainerWidth);
+
+  const containerRef = useCallback((node: HTMLElement | null) => {
+    observerRef.current?.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 { containerRef, containerWidth };
+}