Add gutterBreakPoints property to index.d.ts for react-responsive-masonry (DefinitelyTyped#74015)

alifeinbinary · web-flow · commit c89061999b92 · 2025-12-01T12:16:49.000-08:00
diff --git a/types/react-responsive-masonry/index.d.ts b/types/react-responsive-masonry/index.d.ts
@@ -52,6 +52,14 @@ export interface ResponsiveMasonryProps {
     columnsCountBreakPoints?: {
         [key: number]: number;
     };
+    /**
+     * A Object containing Keys as breakpoints in px and values as the gutter size
+     *
+     * Default Value = { 350: '10px', 750: '10px', 900: '10px' }
+     */
+    gutterBreakPoints?: { 
+        [key: number]: string;
+    };
     className?: string;
     style?: CSSProperties;
 }
diff --git a/types/react-responsive-masonry/package.json b/types/react-responsive-masonry/package.json
@@ -1,7 +1,7 @@
 {
     "private": true,
     "name": "@types/react-responsive-masonry",
-    "version": "2.6.9999",
+    "version": "2.7.9999",
     "projects": [
         "https://github.com/cedricdelpoux/react-responsive-masonry#readme"
     ],
diff --git a/types/react-responsive-masonry/react-responsive-masonry-tests.tsx b/types/react-responsive-masonry/react-responsive-masonry-tests.tsx
@@ -44,6 +44,7 @@ const Test = () => {
             {/* Test with all props */}
             <ResponsiveMasonry
                 columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}
+                gutterBreakPoints={{ 320: "1rem", 768: "1.2rem", 960: "1.5rem" }}
                 className="responsive-masonry"
                 style={{ padding: "20px" }}
             >

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"private": true,`
`3`	`3`	`"name": "@types/react-responsive-masonry",`
`4`		`- "version": "2.6.9999",`
	`4`	`+ "version": "2.7.9999",`
`5`	`5`	`"projects": [`
`6`	`6`	`"https://github.com/cedricdelpoux/react-responsive-masonry#readme"`
`7`	`7`	`],`
Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,7 @@ const Test = () => {`
`44`	`44`	`{/* Test with all props */}`
`45`	`45`	`<ResponsiveMasonry`
`46`	`46`	`columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}`
	`47`	`+ gutterBreakPoints={{ 320: "1rem", 768: "1.2rem", 960: "1.5rem" }}`
`47`	`48`	`className="responsive-masonry"`
`48`	`49`	`style={{ padding: "20px" }}`
`49`	`50`	`>`