react-responsive-masonry - npm Package Compare versions

Comparing version 2.6.0 to 2.7.0

es/ResponsiveMasonry/index.js

 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 var DEFAULT_COLUMNS_COUNT = 1;
+var DEFAULT_GUTTER = "10px";
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
@@ -47,2 +48,3 @@
   } : _ref$columnsCountBrea,
+      gutterBreakPoints = _ref.gutterBreakPoints,
       children = _ref.children,
@@ -54,14 +56,20 @@ _ref$className = _ref.className,
   var windowWidth = useWindowWidth();
-  var columnsCount = useMemo(function () {
-    var breakPoints = Object.keys(columnsCountBreakPoints).sort(function (a, b) {
+  var getResponsiveValue = useCallback(function (breakPoints, defaultValue) {
+    var sortedBreakPoints = Object.keys(breakPoints).sort(function (a, b) {
       return a - b;
     });
-    var count = breakPoints.length > 0 ? columnsCountBreakPoints[breakPoints[0]] : DEFAULT_COLUMNS_COUNT;
-    breakPoints.forEach(function (breakPoint) {
+    var value = sortedBreakPoints.length > 0 ? breakPoints[sortedBreakPoints[0]] : defaultValue;
+    sortedBreakPoints.forEach(function (breakPoint) {
       if (breakPoint < windowWidth) {
-        count = columnsCountBreakPoints[breakPoint];
+        value = breakPoints[breakPoint];
       }
     });
-    return count;
-  }, [windowWidth, columnsCountBreakPoints]);
+    return value;
+  }, [windowWidth]);
+  var columnsCount = useMemo(function () {
+    return getResponsiveValue(columnsCountBreakPoints, DEFAULT_COLUMNS_COUNT);
+  }, [getResponsiveValue, columnsCountBreakPoints]);
+  var gutter = useMemo(function () {
+    return getResponsiveValue(gutterBreakPoints, DEFAULT_GUTTER);
+  }, [getResponsiveValue, gutterBreakPoints]);
   return /*#__PURE__*/React.createElement("div", {
@@ -73,3 +81,4 @@ className: className,
       key: index,
-      columnsCount: columnsCount
+      columnsCount: columnsCount,
+      gutter: gutter
     });
@@ -76,0 +85,0 @@ }));

lib/ResponsiveMasonry/index.js

@@ -19,2 +19,3 @@ "use strict";
 var DEFAULT_COLUMNS_COUNT = 1;
+var DEFAULT_GUTTER = "10px";
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? _react.useLayoutEffect : _react.useEffect;
@@ -63,2 +64,3 @@
   } : _ref$columnsCountBrea,
+      gutterBreakPoints = _ref.gutterBreakPoints,
       children = _ref.children,
@@ -70,14 +72,20 @@ _ref$className = _ref.className,
   var windowWidth = useWindowWidth();
-  var columnsCount = (0, _react.useMemo)(function () {
-    var breakPoints = Object.keys(columnsCountBreakPoints).sort(function (a, b) {
+  var getResponsiveValue = (0, _react.useCallback)(function (breakPoints, defaultValue) {
+    var sortedBreakPoints = Object.keys(breakPoints).sort(function (a, b) {
       return a - b;
     });
-    var count = breakPoints.length > 0 ? columnsCountBreakPoints[breakPoints[0]] : DEFAULT_COLUMNS_COUNT;
-    breakPoints.forEach(function (breakPoint) {
+    var value = sortedBreakPoints.length > 0 ? breakPoints[sortedBreakPoints[0]] : defaultValue;
+    sortedBreakPoints.forEach(function (breakPoint) {
       if (breakPoint < windowWidth) {
-        count = columnsCountBreakPoints[breakPoint];
+        value = breakPoints[breakPoint];
       }
     });
-    return count;
-  }, [windowWidth, columnsCountBreakPoints]);
+    return value;
+  }, [windowWidth]);
+  var columnsCount = (0, _react.useMemo)(function () {
+    return getResponsiveValue(columnsCountBreakPoints, DEFAULT_COLUMNS_COUNT);
+  }, [getResponsiveValue, columnsCountBreakPoints]);
+  var gutter = (0, _react.useMemo)(function () {
+    return getResponsiveValue(gutterBreakPoints, DEFAULT_GUTTER);
+  }, [getResponsiveValue, gutterBreakPoints]);
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -89,3 +97,4 @@ className: className,
       key: index,
-      columnsCount: columnsCount
+      columnsCount: columnsCount,
+      gutter: gutter
     });
@@ -92,0 +101,0 @@ }));

package.json

 {
   "name": "react-responsive-masonry",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "author": {
@@ -5,0 +5,0 @@ "name": "Cédric Delpoux",

README.md

@@ -44,3 +44,3 @@ # react-responsive-masonry
 
-// The number of columns change by resizing the window
+// The number of columns and the gutter change by resizing the window
 class MyWrapper extends React.Component {
@@ -51,2 +51,3 @@ render() {
                 columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}
+                gutterBreakpoints={{350: "12px", 750: "16px", 900: "24px"}}
             >
@@ -65,3 +66,3 @@ <Masonry>
 
-// The number of columns don't change by resizing the window
+// The number of columns and the gutter don't change by resizing the window
 class MyWrapper extends Component {
@@ -97,5 +98,6 @@ render() {
 
-| Name                    | PropType | Description                                               | Default                  |
-| ----------------------- | -------- | --------------------------------------------------------- | ------------------------ |
-| columnsCountBreakPoints | Object   | Keys are breakpoints in px, values are the columns number | {350: 1, 750: 2, 900: 3} |
+| Name                    | PropType | Description                                                                              | Default                  |
+| ----------------------- | -------- | ---------------------------------------------------------------------------------------- | ------------------------ |
+| columnsCountBreakPoints | Object   | Keys are breakpoints in px, values are the columns number                                | {350: 1, 750: 2, 900: 3} |
+| gutterBreakpoints       | Object   | Keys are breakpoints in px, values are the gutter value in any valid CSS value for 'gap' |                          |
 
@@ -102,0 +104,0 @@ ## Contributing

umd/react-responsive-masonry.js

 /*!
- * react-responsive-masonry v2.6.0 - https://github.com/cedricdelpoux/react-responsive-masonry#readme
+ * react-responsive-masonry v2.7.0 - https://github.com/cedricdelpoux/react-responsive-masonry#readme
  * MIT Licensed
@@ -7,9 +7,9 @@ */
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("prop-types"), require("react"));
+		module.exports = factory(require("react"), require("prop-types"));
 	else if(typeof define === 'function' && define.amd)
-		define(["prop-types", "react"], factory);
+		define(["react", "prop-types"], factory);
 	else if(typeof exports === 'object')
-		exports["ReactResponsiveMasonry"] = factory(require("prop-types"), require("react"));
+		exports["ReactResponsiveMasonry"] = factory(require("react"), require("prop-types"));
 	else
-		root["ReactResponsiveMasonry"] = factory(root["PropTypes"], root["React"]);
+		root["ReactResponsiveMasonry"] = factory(root["React"], root["PropTypes"]);
 })(window, function(__WEBPACK_EXTERNAL_MODULE__0__, __WEBPACK_EXTERNAL_MODULE__1__) {
@@ -133,7 +133,7 @@ return /******/ (function(modules) { // webpackBootstrap
 // EXTERNAL MODULE: external {"root":"PropTypes","commonjs2":"prop-types","commonjs":"prop-types","amd":"prop-types"}
-var external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_ = __webpack_require__(0);
+var external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_ = __webpack_require__(1);
 var external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_);
 
 // EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"}
-var external_root_React_commonjs2_react_commonjs_react_amd_react_ = __webpack_require__(1);
+var external_root_React_commonjs2_react_commonjs_react_amd_react_ = __webpack_require__(0);
 var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_);
@@ -321,2 +321,3 @@
 var DEFAULT_COLUMNS_COUNT = 1;
+var DEFAULT_GUTTER = "10px";
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? external_root_React_commonjs2_react_commonjs_react_amd_react_["useLayoutEffect"] : external_root_React_commonjs2_react_commonjs_react_amd_react_["useEffect"];
@@ -365,2 +366,3 @@
   } : _ref$columnsCountBrea,
+      gutterBreakPoints = _ref.gutterBreakPoints,
       children = _ref.children,
@@ -372,14 +374,20 @@ _ref$className = _ref.className,
   var windowWidth = ResponsiveMasonry_useWindowWidth();
-  var columnsCount = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useMemo"])(function () {
-    var breakPoints = Object.keys(columnsCountBreakPoints).sort(function (a, b) {
+  var getResponsiveValue = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useCallback"])(function (breakPoints, defaultValue) {
+    var sortedBreakPoints = Object.keys(breakPoints).sort(function (a, b) {
       return a - b;
     });
-    var count = breakPoints.length > 0 ? columnsCountBreakPoints[breakPoints[0]] : DEFAULT_COLUMNS_COUNT;
-    breakPoints.forEach(function (breakPoint) {
+    var value = sortedBreakPoints.length > 0 ? breakPoints[sortedBreakPoints[0]] : defaultValue;
+    sortedBreakPoints.forEach(function (breakPoint) {
       if (breakPoint < windowWidth) {
-        count = columnsCountBreakPoints[breakPoint];
+        value = breakPoints[breakPoint];
       }
     });
-    return count;
-  }, [windowWidth, columnsCountBreakPoints]);
+    return value;
+  }, [windowWidth]);
+  var columnsCount = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useMemo"])(function () {
+    return getResponsiveValue(columnsCountBreakPoints, DEFAULT_COLUMNS_COUNT);
+  }, [getResponsiveValue, columnsCountBreakPoints]);
+  var gutter = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_["useMemo"])(function () {
+    return getResponsiveValue(gutterBreakPoints, DEFAULT_GUTTER);
+  }, [getResponsiveValue, gutterBreakPoints]);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
@@ -391,3 +399,4 @@ className: className,
       key: index,
-      columnsCount: columnsCount
+      columnsCount: columnsCount,
+      gutter: gutter
     });
@@ -394,0 +403,0 @@ }));

umd/react-responsive-masonry.min.js

 /*!
- * react-responsive-masonry v2.6.0 - https://github.com/cedricdelpoux/react-responsive-masonry#readme
+ * react-responsive-masonry v2.7.0 - https://github.com/cedricdelpoux/react-responsive-masonry#readme
  * MIT Licensed
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactResponsiveMasonry=t(require("react")):e.ReactResponsiveMasonry=t(e.React)}(window,(function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(2)},function(e,t,n){"use strict";n.r(t),n.d(t,"ResponsiveMasonry",(function(){return f}));var r=n(0),o=n.n(r);function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var a=function(e){var t,n;function r(){var t;return(t=e.call(this)||this).state={columns:[],childRefs:[],hasDistributed:!1},t}n=e,(t=r).prototype=Object.create(n.prototype),t.prototype.constructor=t,u(t,n);var a=r.prototype;return a.componentDidUpdate=function(){this.state.hasDistributed||this.props.sequential||this.distributeChildren()},r.getDerivedStateFromProps=function(e,t){var n=e.children,o=e.columnsCount;return t&&n===t.children?null:i({},r.getEqualCountColumns(n,o),{children:n,hasDistributed:!1})},a.distributeChildren=function(){var e=this,t=this.props,n=t.children,r=t.columnsCount,u=Array(r).fill(0);if(this.state.childRefs.every((function(e){return e.current.getBoundingClientRect().height}))){var a=Array.from({length:r},(function(){return[]})),s=0;o.a.Children.forEach(n,(function(t){if(t&&o.a.isValidElement(t)){var n=e.state.childRefs[s].current.getBoundingClientRect().height,r=u.indexOf(Math.min.apply(Math,u));u[r]+=n,a[r].push(t),s++}})),this.setState((function(e){return i({},e,{columns:a,hasDistributed:!0})}))}},r.getEqualCountColumns=function(e,t){var n=Array.from({length:t},(function(){return[]})),r=0,i=[];return o.a.Children.forEach(e,(function(e){if(e&&o.a.isValidElement(e)){var u=o.a.createRef();i.push(u),n[r%t].push(o.a.createElement("div",{style:{display:"flex",justifyContent:"stretch"},key:r,ref:u},e)),r++}})),{columns:n,childRefs:i}},a.renderColumns=function(){var e=this.props,t=e.gutter,n=e.itemTag,r=e.itemStyle;return this.state.columns.map((function(e,u){return o.a.createElement(n,{key:u,style:i({display:"flex",flexDirection:"column",justifyContent:"flex-start",alignContent:"stretch",flex:1,width:0,gap:t},r)},e.map((function(e){return e})))}))},a.render=function(){var e=this.props,t=e.gutter,n=e.className,r=e.style,u=e.containerTag;return o.a.createElement(u,{style:i({display:"flex",flexDirection:"row",justifyContent:"center",alignContent:"stretch",boxSizing:"border-box",width:"100%",gap:t},r),className:n},this.renderColumns())},r}(o.a.Component);a.defaultProps={columnsCount:3,gutter:"0",className:null,style:{},containerTag:"div",itemTag:"div",itemStyle:{},sequential:!1};var s=a,c="undefined"!=typeof window?r.useLayoutEffect:r.useEffect,l=function(){var e=function(){var e=Object(r.useState)(!1),t=e[0],n=e[1];return c((function(){n(!0)}),[]),t}(),t=Object(r.useState)("undefined"!=typeof window?window.innerWidth:0),n=t[0],o=t[1],i=Object(r.useCallback)((function(){e&&o(window.innerWidth)}),[e]);return c((function(){if(e)return window.addEventListener("resize",i),i(),function(){return window.removeEventListener("resize",i)}}),[e,i]),n},f=function(e){var t=e.columnsCountBreakPoints,n=void 0===t?{350:1,750:2,900:3}:t,i=e.children,u=e.className,a=void 0===u?null:u,s=e.style,c=void 0===s?null:s,f=l(),d=Object(r.useMemo)((function(){var e=Object.keys(n).sort((function(e,t){return e-t})),t=e.length>0?n[e[0]]:1;return e.forEach((function(e){e<f&&(t=n[e])})),t}),[f,n]);return o.a.createElement("div",{className:a,style:c},o.a.Children.map(i,(function(e,t){return o.a.cloneElement(e,{key:t,columnsCount:d})})))};t.default=s}]).default}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactResponsiveMasonry=t(require("react")):e.ReactResponsiveMasonry=t(e.React)}(window,(function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(2)},function(e,t,n){"use strict";n.r(t),n.d(t,"ResponsiveMasonry",(function(){return f}));var r=n(0),o=n.n(r);function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var a=function(e){var t,n;function r(){var t;return(t=e.call(this)||this).state={columns:[],childRefs:[],hasDistributed:!1},t}n=e,(t=r).prototype=Object.create(n.prototype),t.prototype.constructor=t,u(t,n);var a=r.prototype;return a.componentDidUpdate=function(){this.state.hasDistributed||this.props.sequential||this.distributeChildren()},r.getDerivedStateFromProps=function(e,t){var n=e.children,o=e.columnsCount;return t&&n===t.children?null:i({},r.getEqualCountColumns(n,o),{children:n,hasDistributed:!1})},a.distributeChildren=function(){var e=this,t=this.props,n=t.children,r=t.columnsCount,u=Array(r).fill(0);if(this.state.childRefs.every((function(e){return e.current.getBoundingClientRect().height}))){var a=Array.from({length:r},(function(){return[]})),c=0;o.a.Children.forEach(n,(function(t){if(t&&o.a.isValidElement(t)){var n=e.state.childRefs[c].current.getBoundingClientRect().height,r=u.indexOf(Math.min.apply(Math,u));u[r]+=n,a[r].push(t),c++}})),this.setState((function(e){return i({},e,{columns:a,hasDistributed:!0})}))}},r.getEqualCountColumns=function(e,t){var n=Array.from({length:t},(function(){return[]})),r=0,i=[];return o.a.Children.forEach(e,(function(e){if(e&&o.a.isValidElement(e)){var u=o.a.createRef();i.push(u),n[r%t].push(o.a.createElement("div",{style:{display:"flex",justifyContent:"stretch"},key:r,ref:u},e)),r++}})),{columns:n,childRefs:i}},a.renderColumns=function(){var e=this.props,t=e.gutter,n=e.itemTag,r=e.itemStyle;return this.state.columns.map((function(e,u){return o.a.createElement(n,{key:u,style:i({display:"flex",flexDirection:"column",justifyContent:"flex-start",alignContent:"stretch",flex:1,width:0,gap:t},r)},e.map((function(e){return e})))}))},a.render=function(){var e=this.props,t=e.gutter,n=e.className,r=e.style,u=e.containerTag;return o.a.createElement(u,{style:i({display:"flex",flexDirection:"row",justifyContent:"center",alignContent:"stretch",boxSizing:"border-box",width:"100%",gap:t},r),className:n},this.renderColumns())},r}(o.a.Component);a.defaultProps={columnsCount:3,gutter:"0",className:null,style:{},containerTag:"div",itemTag:"div",itemStyle:{},sequential:!1};var c=a,s="undefined"!=typeof window?r.useLayoutEffect:r.useEffect,l=function(){var e=function(){var e=Object(r.useState)(!1),t=e[0],n=e[1];return s((function(){n(!0)}),[]),t}(),t=Object(r.useState)("undefined"!=typeof window?window.innerWidth:0),n=t[0],o=t[1],i=Object(r.useCallback)((function(){e&&o(window.innerWidth)}),[e]);return s((function(){if(e)return window.addEventListener("resize",i),i(),function(){return window.removeEventListener("resize",i)}}),[e,i]),n},f=function(e){var t=e.columnsCountBreakPoints,n=void 0===t?{350:1,750:2,900:3}:t,i=e.gutterBreakPoints,u=e.children,a=e.className,c=void 0===a?null:a,s=e.style,f=void 0===s?null:s,d=l(),p=Object(r.useCallback)((function(e,t){var n=Object.keys(e).sort((function(e,t){return e-t})),r=n.length>0?e[n[0]]:t;return n.forEach((function(t){t<d&&(r=e[t])})),r}),[d]),h=Object(r.useMemo)((function(){return p(n,1)}),[p,n]),y=Object(r.useMemo)((function(){return p(i,"10px")}),[p,i]);return o.a.createElement("div",{className:c,style:f},o.a.Children.map(u,(function(e,t){return o.a.cloneElement(e,{key:t,columnsCount:h,gutter:y})})))};t.default=c}]).default}));
 //# sourceMappingURL=react-responsive-masonry.min.js.map

No alert changes

Improved metrics

Total package byte prevSize

68975

increased by3.81%

Lines of code

918

increased by3.03%

Number of lines in readme file

126

increased by1.61%

No dependency changes