react-responsive-masonry - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

es/index.js

@@ -1,5 +0,21 @@
-import Masonry from "./Masonry";
-import ResponsiveMasonry from "./ResponsiveMasonry";
+"use strict";
 
-export default Masonry;
-export { ResponsiveMasonry };
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ResponsiveMasonry", {
+  enumerable: true,
+  get: function get() {
+    return _ResponsiveMasonry["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _Masonry = _interopRequireDefault(require("./Masonry"));
+
+var _ResponsiveMasonry = _interopRequireDefault(require("./ResponsiveMasonry"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = _Masonry["default"];
+exports["default"] = _default;

es/Masonry/index.js

@@ -1,50 +0,40 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+"use strict";
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+var _react = _interopRequireDefault(require("react"));
 
-import React from "react";
-import PropTypes from "prop-types";
+var _jsxFileName = "/Users/cedricdelpoux/Development/perso/react-responsive-masonry/src/Masonry/index.js";
 
-var styles = {
-  container: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignContent: "stretch",
-    boxSizing: "border-box",
-    width: "100%"
-  },
-  column: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "flex-start",
-    alignContent: "stretch",
-    flexGrow: 1,
-    flexBasis: 0
-  }
-};
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var Masonry = function (_React$Component) {
-  _inherits(Masonry, _React$Component);
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+
+var Masonry = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Masonry, _React$Component);
+
   function Masonry() {
-    _classCallCheck(this, Masonry);
-
-    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+    return _React$Component.apply(this, arguments) || this;
   }
 
-  Masonry.prototype.getColumns = function getColumns() {
-    var _props = this.props,
-        children = _props.children,
-        columnsCount = _props.columnsCount;
+  var _proto = Masonry.prototype;
 
-    var columns = Array.from({ length: columnsCount }, function () {
+  _proto.getColumns = function getColumns() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        columnsCount = _this$props.columnsCount;
+    var columns = Array.from({
+      length: columnsCount
+    }, function () {
       return [];
     });
 
-    React.Children.forEach(children, function (child, index) {
+    _react["default"].Children.forEach(children, function (child, index) {
       columns[index % columnsCount].push(child);
@@ -56,49 +46,81 @@ });
 
-  Masonry.prototype.renderColumn = function renderColumn(column) {
+  _proto.renderColumn = function renderColumn(column) {
+    var _this = this;
+
     var gutter = this.props.gutter;
-
     return column.map(function (item, i) {
-      return React.createElement(
-        "div",
-        { key: i, style: { margin: gutter } },
-        item
-      );
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: i,
+        style: {
+          marginTop: i > 0 ? gutter : undefined
+        },
+        __self: _this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 19,
+          columnNumber: 7
+        }
+      }, item);
     });
   };
 
-  Masonry.prototype.renderColumns = function renderColumns() {
+  _proto.renderColumns = function renderColumns() {
     var _this2 = this;
 
+    var gutter = this.props.gutter;
     return this.getColumns().map(function (column, i) {
-      return React.createElement(
-        "div",
-        { key: i, style: styles.column },
-        _this2.renderColumn(column)
-      );
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: i,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "flex-start",
+          alignContent: "stretch",
+          flex: 1,
+          width: 0,
+          marginLeft: i > 0 ? gutter : undefined
+        },
+        __self: _this2,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 28,
+          columnNumber: 7
+        }
+      }, _this2.renderColumn(column));
     });
   };
 
-  Masonry.prototype.render = function render() {
-    var _props2 = this.props,
-        className = _props2.className,
-        style = _props2.style;
-
-    return React.createElement(
-      "div",
-      { style: _extends({}, styles.container, style), className: className },
-      this.renderColumns()
-    );
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        className = _this$props2.className,
+        style = _this$props2.style;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: _extends({
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignContent: "stretch",
+        boxSizing: "border-box",
+        width: "100%"
+      }, style),
+      className: className,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 48,
+        columnNumber: 7
+      }
+    }, this.renderColumns());
   };
 
   return Masonry;
-}(React.Component);
+}(_react["default"].Component);
 
 Masonry.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  columnsCount: PropTypes.number,
-  gutter: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.object
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
+  columnsCount: _propTypes["default"].number,
+  gutter: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  style: _propTypes["default"].object
 } : {};
-
 Masonry.defaultProps = {
@@ -110,3 +132,3 @@ columnsCount: 3,
 };
-
-export default Masonry;
+var _default = Masonry;
+exports["default"] = _default;

es/ResponsiveMasonry/index.js

@@ -1,30 +0,40 @@
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+"use strict";
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+var _react = _interopRequireDefault(require("react"));
 
-import React from "react";
-import PropTypes from "prop-types";
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _jsxFileName = "/Users/cedricdelpoux/Development/perso/react-responsive-masonry/src/ResponsiveMasonry/index.js";
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+
 var DEFAULT_COLUMNS_COUNT = 1;
 
-var MasonryResponsive = function (_React$Component) {
-  _inherits(MasonryResponsive, _React$Component);
+var MasonryResponsive = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(MasonryResponsive, _React$Component);
 
   function MasonryResponsive(props) {
-    _classCallCheck(this, MasonryResponsive);
+    var _this;
 
-    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
-
+    _this = _React$Component.call(this, props) || this;
     _this.state = {
       columnsCount: DEFAULT_COLUMNS_COUNT
     };
-
-    _this.handleResize = _this.handleResize.bind(_this);
-    _this.handleRef = _this.handleRef.bind(_this);
+    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
+    _this.handleRef = _this.handleRef.bind(_assertThisInitialized(_this));
     return _this;
   }
 
-  MasonryResponsive.prototype.componentDidMount = function componentDidMount() {
+  var _proto = MasonryResponsive.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
     this.updateColumnsCount();
@@ -34,7 +44,7 @@ window.addEventListener("resize", this.handleResize); // eslint-disable-line
 
-  MasonryResponsive.prototype.componentWillUnmount = function componentWillUnmount() {
+  _proto.componentWillUnmount = function componentWillUnmount() {
     window.removeEventListener("resize", this.handleResize); // eslint-disable-line
   };
 
-  MasonryResponsive.prototype.getSortedBreakPoints = function getSortedBreakPoints() {
+  _proto.getSortedBreakPoints = function getSortedBreakPoints() {
     var breakPoints = Object.keys(this.props.columnsCountBreakPoints);
@@ -46,9 +56,7 @@ return breakPoints.sort(function (a, b) {
 
-  MasonryResponsive.prototype.updateColumnsCount = function updateColumnsCount() {
+  _proto.updateColumnsCount = function updateColumnsCount() {
     var columnsCountBreakPoints = this.props.columnsCountBreakPoints;
-
     var containerWidth = this.container.offsetWidth;
     var breakPoints = this.getSortedBreakPoints();
     var columnsCount = breakPoints.length > 0 ? columnsCountBreakPoints[breakPoints[0]] : DEFAULT_COLUMNS_COUNT;
-
     breakPoints.forEach(function (breakPoint) {
@@ -61,43 +69,49 @@ if (breakPoint < containerWidth) {
     if (columnsCount && columnsCount !== this.state.columnsCount) {
-      this.setState({ columnsCount: columnsCount });
+      this.setState({
+        columnsCount: columnsCount
+      });
     }
   };
 
-  MasonryResponsive.prototype.handleResize = function handleResize() {
+  _proto.handleResize = function handleResize() {
     this.updateColumnsCount();
   };
 
-  MasonryResponsive.prototype.handleRef = function handleRef(ref) {
+  _proto.handleRef = function handleRef(ref) {
     if (!this.container) this.container = ref;
   };
 
-  MasonryResponsive.prototype.render = function render() {
+  _proto.render = function render() {
     var columnsCount = this.state.columnsCount;
-    var _props = this.props,
-        children = _props.children,
-        className = _props.className,
-        style = _props.style;
-
-    return React.createElement(
-      "div",
-      { ref: this.handleRef, className: className, style: style },
-      React.Children.map(children, function (child, index) {
-        return React.cloneElement(child, {
-          key: index,
-          columnsCount: columnsCount
-        });
-      })
-    );
+    var _this$props = this.props,
+        children = _this$props.children,
+        className = _this$props.className,
+        style = _this$props.style;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      ref: this.handleRef,
+      className: className,
+      style: style,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 64,
+        columnNumber: 7
+      }
+    }, _react["default"].Children.map(children, function (child, index) {
+      return _react["default"].cloneElement(child, {
+        key: index,
+        columnsCount: columnsCount
+      });
+    }));
   };
 
   return MasonryResponsive;
-}(React.Component);
+}(_react["default"].Component);
 
 MasonryResponsive.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  columnsCountBreakPoints: PropTypes.object,
-  className: PropTypes.string,
-  style: PropTypes.object
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
+  columnsCountBreakPoints: _propTypes["default"].object,
+  className: _propTypes["default"].string,
+  style: _propTypes["default"].object
 } : {};
-
 MasonryResponsive.defaultProps = {
@@ -112,3 +126,3 @@ columnsCountBreakPoints: {
 };
-
-export default MasonryResponsive;
+var _default = MasonryResponsive;
+exports["default"] = _default;

lib/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.ResponsiveMasonry = undefined;
+exports["default"] = void 0;
 
-var _Masonry = require("./Masonry");
+var _Masonry = _interopRequireDefault(require("./Masonry"));
 
-var _Masonry2 = _interopRequireDefault(_Masonry);
+var _ResponsiveMasonry = _interopRequireDefault(require("./ResponsiveMasonry"));
 
-var _ResponsiveMasonry = require("./ResponsiveMasonry");
+exports.ResponsiveMasonry = _ResponsiveMasonry["default"];
 
-var _ResponsiveMasonry2 = _interopRequireDefault(_ResponsiveMasonry);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _Masonry2.default;
-exports.ResponsiveMasonry = _ResponsiveMasonry2.default;
+var _default = _Masonry["default"];
+exports["default"] = _default;

lib/Masonry/index.js

 "use strict";
 
 exports.__esModule = true;
+exports["default"] = void 0;
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = require("react");
+var _react = _interopRequireDefault(require("react"));
 
-var _react2 = _interopRequireDefault(_react);
+var _jsxFileName = "/Users/cedricdelpoux/Development/perso/react-responsive-masonry/src/Masonry/index.js";
 
-var _propTypes = require("prop-types");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var Masonry = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Masonry, _React$Component);
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var styles = {
-  container: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignContent: "stretch",
-    boxSizing: "border-box",
-    width: "100%"
-  },
-  column: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "flex-start",
-    alignContent: "stretch",
-    flexGrow: 1,
-    flexBasis: 0
-  }
-};
-
-var Masonry = function (_React$Component) {
-  _inherits(Masonry, _React$Component);
-
   function Masonry() {
-    _classCallCheck(this, Masonry);
-
-    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+    return _React$Component.apply(this, arguments) || this;
   }
 
-  Masonry.prototype.getColumns = function getColumns() {
-    var _props = this.props,
-        children = _props.children,
-        columnsCount = _props.columnsCount;
+  var _proto = Masonry.prototype;
 
-    var columns = Array.from({ length: columnsCount }, function () {
+  _proto.getColumns = function getColumns() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        columnsCount = _this$props.columnsCount;
+    var columns = Array.from({
+      length: columnsCount
+    }, function () {
       return [];
     });
 
-    _react2.default.Children.forEach(children, function (child, index) {
+    _react["default"].Children.forEach(children, function (child, index) {
       columns[index % columnsCount].push(child);
@@ -67,49 +44,81 @@ });
 
-  Masonry.prototype.renderColumn = function renderColumn(column) {
+  _proto.renderColumn = function renderColumn(column) {
+    var _this = this;
+
     var gutter = this.props.gutter;
-
     return column.map(function (item, i) {
-      return _react2.default.createElement(
-        "div",
-        { key: i, style: { margin: gutter } },
-        item
-      );
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: i,
+        style: {
+          marginTop: i > 0 ? gutter : undefined
+        },
+        __self: _this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 19,
+          columnNumber: 7
+        }
+      }, item);
     });
   };
 
-  Masonry.prototype.renderColumns = function renderColumns() {
+  _proto.renderColumns = function renderColumns() {
     var _this2 = this;
 
+    var gutter = this.props.gutter;
     return this.getColumns().map(function (column, i) {
-      return _react2.default.createElement(
-        "div",
-        { key: i, style: styles.column },
-        _this2.renderColumn(column)
-      );
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: i,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "flex-start",
+          alignContent: "stretch",
+          flex: 1,
+          width: 0,
+          marginLeft: i > 0 ? gutter : undefined
+        },
+        __self: _this2,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 28,
+          columnNumber: 7
+        }
+      }, _this2.renderColumn(column));
     });
   };
 
-  Masonry.prototype.render = function render() {
-    var _props2 = this.props,
-        className = _props2.className,
-        style = _props2.style;
-
-    return _react2.default.createElement(
-      "div",
-      { style: _extends({}, styles.container, style), className: className },
-      this.renderColumns()
-    );
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        className = _this$props2.className,
+        style = _this$props2.style;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: _extends({
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignContent: "stretch",
+        boxSizing: "border-box",
+        width: "100%"
+      }, style),
+      className: className,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 48,
+        columnNumber: 7
+      }
+    }, this.renderColumns());
   };
 
   return Masonry;
-}(_react2.default.Component);
+}(_react["default"].Component);
 
 Masonry.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node]).isRequired,
-  columnsCount: _propTypes2.default.number,
-  gutter: _propTypes2.default.string,
-  className: _propTypes2.default.string,
-  style: _propTypes2.default.object
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
+  columnsCount: _propTypes["default"].number,
+  gutter: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  style: _propTypes["default"].object
 } : {};
-
 Masonry.defaultProps = {
@@ -121,4 +130,4 @@ columnsCount: 3,
 };
-
-exports.default = Masonry;
-module.exports = exports["default"];
+var _default = Masonry;
+exports["default"] = _default;
+module.exports = exports.default;

lib/ResponsiveMasonry/index.js

 "use strict";
 
 exports.__esModule = true;
+exports["default"] = void 0;
 
-var _react = require("react");
+var _react = _interopRequireDefault(require("react"));
 
-var _react2 = _interopRequireDefault(_react);
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes = require("prop-types");
+var _jsxFileName = "/Users/cedricdelpoux/Development/perso/react-responsive-masonry/src/ResponsiveMasonry/index.js";
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var DEFAULT_COLUMNS_COUNT = 1;
 
-var MasonryResponsive = function (_React$Component) {
-  _inherits(MasonryResponsive, _React$Component);
+var MasonryResponsive = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(MasonryResponsive, _React$Component);
 
   function MasonryResponsive(props) {
-    _classCallCheck(this, MasonryResponsive);
+    var _this;
 
-    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
-
+    _this = _React$Component.call(this, props) || this;
     _this.state = {
       columnsCount: DEFAULT_COLUMNS_COUNT
     };
-
-    _this.handleResize = _this.handleResize.bind(_this);
-    _this.handleRef = _this.handleRef.bind(_this);
+    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
+    _this.handleRef = _this.handleRef.bind(_assertThisInitialized(_this));
     return _this;
   }
 
-  MasonryResponsive.prototype.componentDidMount = function componentDidMount() {
+  var _proto = MasonryResponsive.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
     this.updateColumnsCount();
@@ -45,7 +42,7 @@ window.addEventListener("resize", this.handleResize); // eslint-disable-line
 
-  MasonryResponsive.prototype.componentWillUnmount = function componentWillUnmount() {
+  _proto.componentWillUnmount = function componentWillUnmount() {
     window.removeEventListener("resize", this.handleResize); // eslint-disable-line
   };
 
-  MasonryResponsive.prototype.getSortedBreakPoints = function getSortedBreakPoints() {
+  _proto.getSortedBreakPoints = function getSortedBreakPoints() {
     var breakPoints = Object.keys(this.props.columnsCountBreakPoints);
@@ -57,9 +54,7 @@ return breakPoints.sort(function (a, b) {
 
-  MasonryResponsive.prototype.updateColumnsCount = function updateColumnsCount() {
+  _proto.updateColumnsCount = function updateColumnsCount() {
     var columnsCountBreakPoints = this.props.columnsCountBreakPoints;
-
     var containerWidth = this.container.offsetWidth;
     var breakPoints = this.getSortedBreakPoints();
     var columnsCount = breakPoints.length > 0 ? columnsCountBreakPoints[breakPoints[0]] : DEFAULT_COLUMNS_COUNT;
-
     breakPoints.forEach(function (breakPoint) {
@@ -72,43 +67,49 @@ if (breakPoint < containerWidth) {
     if (columnsCount && columnsCount !== this.state.columnsCount) {
-      this.setState({ columnsCount: columnsCount });
+      this.setState({
+        columnsCount: columnsCount
+      });
     }
   };
 
-  MasonryResponsive.prototype.handleResize = function handleResize() {
+  _proto.handleResize = function handleResize() {
     this.updateColumnsCount();
   };
 
-  MasonryResponsive.prototype.handleRef = function handleRef(ref) {
+  _proto.handleRef = function handleRef(ref) {
     if (!this.container) this.container = ref;
   };
 
-  MasonryResponsive.prototype.render = function render() {
+  _proto.render = function render() {
     var columnsCount = this.state.columnsCount;
-    var _props = this.props,
-        children = _props.children,
-        className = _props.className,
-        style = _props.style;
-
-    return _react2.default.createElement(
-      "div",
-      { ref: this.handleRef, className: className, style: style },
-      _react2.default.Children.map(children, function (child, index) {
-        return _react2.default.cloneElement(child, {
-          key: index,
-          columnsCount: columnsCount
-        });
-      })
-    );
+    var _this$props = this.props,
+        children = _this$props.children,
+        className = _this$props.className,
+        style = _this$props.style;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      ref: this.handleRef,
+      className: className,
+      style: style,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 64,
+        columnNumber: 7
+      }
+    }, _react["default"].Children.map(children, function (child, index) {
+      return _react["default"].cloneElement(child, {
+        key: index,
+        columnsCount: columnsCount
+      });
+    }));
   };
 
   return MasonryResponsive;
-}(_react2.default.Component);
+}(_react["default"].Component);
 
 MasonryResponsive.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node]).isRequired,
-  columnsCountBreakPoints: _propTypes2.default.object,
-  className: _propTypes2.default.string,
-  style: _propTypes2.default.object
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
+  columnsCountBreakPoints: _propTypes["default"].object,
+  className: _propTypes["default"].string,
+  style: _propTypes["default"].object
 } : {};
-
 MasonryResponsive.defaultProps = {
@@ -123,4 +124,4 @@ columnsCountBreakPoints: {
 };
-
-exports.default = MasonryResponsive;
-module.exports = exports["default"];
+var _default = MasonryResponsive;
+exports["default"] = _default;
+module.exports = exports.default;

package.json

 {
   "name": "react-responsive-masonry",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": {
@@ -9,5 +9,15 @@ "name": "Cédric Delpoux",
   "description": "React responsive masonry component built with css flexbox",
-  "files": ["es", "lib", "umd"],
+  "files": [
+    "es",
+    "lib",
+    "umd"
+  ],
   "homepage": "https://github.com/xuopled/react-responsive-masonry#readme",
-  "keywords": ["react", "masonry", "css", "flexbox", "responsive"],
+  "keywords": [
+    "react",
+    "masonry",
+    "css",
+    "flexbox",
+    "responsive"
+  ],
   "license": "MIT",
@@ -28,3 +38,3 @@ "main": "lib/index.js",
     "start": "nwb serve-react-demo --port 1190",
-    "test": "jest --config jest.config.json --colors --no-cache",
+    "test": "jest --colors --no-cache",
     "test:watch": "yarn test -- --watch"
@@ -34,34 +44,35 @@ },
   "devDependencies": {
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^20.0.3",
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^25.4.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "enzyme": "^2.9.1",
-    "eslint": "^4.5.0",
-    "eslint-config-prettier": "^2.3.0",
-    "eslint-loader": "^1.9.0",
-    "eslint-plugin-jest": "^20.0.3",
-    "eslint-plugin-prettier": "^2.1.2",
-    "eslint-plugin-react": "^7.3.0",
-    "gh-pages": "^1.0.0",
-    "html-loader": "^0.5.1",
-    "husky": "^0.14.3",
-    "jest": "^20.0.4",
-    "jest-css-modules": "^1.1.0",
-    "lint-staged": "^4.0.2",
-    "markdown-loader": "^2.0.1",
-    "nwb": "^0.20.0",
-    "prettier": "^1.5.3",
-    "prop-types": "^15.6.0",
-    "react": "^15.6.1",
-    "react-demo-page": "^0.3.4",
-    "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1"
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-loader": "^4.0.0",
+    "eslint-plugin-jest": "^23.8.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.19.0",
+    "gh-pages": "^2.2.0",
+    "html-loader": "^1.1.0",
+    "husky": "^4.2.5",
+    "jest": "^25.4.0",
+    "jest-css-modules": "^2.1.0",
+    "lint-staged": "^10.1.7",
+    "markdown-loader": "^5.1.0",
+    "nwb": "^0.24.5",
+    "prettier": "^2.0.5",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-demo-page": "^0.3.6",
+    "react-dom": "^16.13.1",
+    "react-test-renderer": "^16.13.1"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   }
 }

README.md

@@ -27,2 +27,6 @@ # react-responsive-masonry
 
+## Demo
+
+See [Demo page][github-page]
+
 ## Example
@@ -110,8 +114,8 @@
 [npm]: https://www.npmjs.org/package/react-responsive-masonry
-[build-badge]: https://img.shields.io/travis/xuopled/react-responsive-masonry/master.svg?style=flat-square
-[build]: https://travis-ci.org/xuopled/react-responsive-masonry
-[codecov-badge]: https://img.shields.io/codecov/c/github/xuopled/react-responsive-masonry.svg?style=flat-square
-[codecov]: https://codecov.io/gh/xuopled/react-responsive-masonry
+[build-badge]: https://img.shields.io/travis/cedricdelpoux/react-responsive-masonry/master.svg?style=flat-square
+[build]: https://travis-ci.org/cedricdelpoux/react-responsive-masonry
+[codecov-badge]: https://img.shields.io/codecov/c/github/cedricdelpoux/react-responsive-masonry.svg?style=flat-square
+[codecov]: https://codecov.io/gh/cedricdelpoux/react-responsive-masonry
 [module-formats]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square
-[github-page]: https://xuopled.github.io/react-responsive-masonry
-[github-issue]: https://github.com/xuopled/react-responsive-masonry/issues/new
+[github-page]: https://cedricdelpoux.github.io/react-responsive-masonry
+[github-issue]: https://github.com/cedricdelpoux/react-responsive-masonry/issues/new

umd/react-responsive-masonry.js

 /*!
- * react-responsive-masonry v2.0.0 - https://github.com/xuopled/react-responsive-masonry#readme
+ * react-responsive-masonry v2.1.0 - https://github.com/xuopled/react-responsive-masonry#readme
  * MIT Licensed
@@ -7,10 +7,10 @@ */
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("react"), require("prop-types"));
+		module.exports = factory(require("prop-types"), require("react"));
 	else if(typeof define === 'function' && define.amd)
-		define(["react", "prop-types"], factory);
+		define(["prop-types", "react"], factory);
 	else if(typeof exports === 'object')
-		exports["ReactResponsiveMasonry"] = factory(require("react"), require("prop-types"));
+		exports["ReactResponsiveMasonry"] = factory(require("prop-types"), require("react"));
 	else
-		root["ReactResponsiveMasonry"] = factory(root["React"], root["PropTypes"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_1__) {
+		root["ReactResponsiveMasonry"] = factory(root["PropTypes"], root["React"]);
+})(window, function(__WEBPACK_EXTERNAL_MODULE__0__, __WEBPACK_EXTERNAL_MODULE__1__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -54,10 +54,30 @@ /******/ 	// The module cache
 /******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, {
-/******/ 				configurable: false,
-/******/ 				enumerable: true,
-/******/ 				get: getter
-/******/ 			});
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 /******/ 		}
 /******/ 	};
 /******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
 /******/ 	// getDefaultExport function for compatibility with non-harmony modules
@@ -78,2 +98,3 @@ /******/ 	__webpack_require__.n = function(module) {
 /******/
+/******/
 /******/ 	// Load entry module and return exports
@@ -87,3 +108,3 @@ /******/ 	return __webpack_require__(__webpack_require__.s = 2);
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__0__;
 
@@ -94,3 +115,3 @@ /***/ }),
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__1__;
 
@@ -109,124 +130,108 @@ /***/ }),
 "use strict";
-Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Masonry__ = __webpack_require__(4);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__ResponsiveMasonry__ = __webpack_require__(5);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ResponsiveMasonry", function() { return __WEBPACK_IMPORTED_MODULE_1__ResponsiveMasonry__["a"]; });
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
 
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "ResponsiveMasonry", function() { return /* reexport */ ResponsiveMasonry; });
 
+// 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_default = /*#__PURE__*/__webpack_require__.n(external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_);
 
-/* harmony default export */ __webpack_exports__["default"] = (__WEBPACK_IMPORTED_MODULE_0__Masonry__["a" /* default */]);
+// 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_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_);
 
+// CONCATENATED MODULE: ./src/Masonry/index.js
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-/***/ }),
-/* 4 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
-"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__);
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+var Masonry_Masonry = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Masonry, _React$Component);
 
-
-
-
-var styles = {
-  container: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignContent: "stretch",
-    boxSizing: "border-box",
-    width: "100%"
-  },
-  column: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "flex-start",
-    alignContent: "stretch",
-    flexGrow: 1,
-    flexBasis: 0
-  }
-};
-
-var Masonry = function (_React$Component) {
-  _inherits(Masonry, _React$Component);
-
   function Masonry() {
-    _classCallCheck(this, Masonry);
-
-    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+    return _React$Component.apply(this, arguments) || this;
   }
 
-  Masonry.prototype.getColumns = function getColumns() {
-    var _props = this.props,
-        children = _props.children,
-        columnsCount = _props.columnsCount;
+  var _proto = Masonry.prototype;
 
-    var columns = Array.from({ length: columnsCount }, function () {
+  _proto.getColumns = function getColumns() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        columnsCount = _this$props.columnsCount;
+    var columns = Array.from({
+      length: columnsCount
+    }, function () {
       return [];
     });
-
-    __WEBPACK_IMPORTED_MODULE_0_react___default.a.Children.forEach(children, function (child, index) {
+    external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Children.forEach(children, function (child, index) {
       columns[index % columnsCount].push(child);
     });
-
     return columns;
   };
 
-  Masonry.prototype.renderColumn = function renderColumn(column) {
+  _proto.renderColumn = function renderColumn(column) {
     var gutter = this.props.gutter;
-
     return column.map(function (item, i) {
-      return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-        "div",
-        { key: i, style: { margin: gutter } },
-        item
-      );
+      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+        key: i,
+        style: {
+          marginTop: i > 0 ? gutter : undefined
+        }
+      }, item);
     });
   };
 
-  Masonry.prototype.renderColumns = function renderColumns() {
-    var _this2 = this;
+  _proto.renderColumns = function renderColumns() {
+    var _this = this;
 
+    var gutter = this.props.gutter;
     return this.getColumns().map(function (column, i) {
-      return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-        "div",
-        { key: i, style: styles.column },
-        _this2.renderColumn(column)
-      );
+      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+        key: i,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "flex-start",
+          alignContent: "stretch",
+          flex: 1,
+          width: 0,
+          marginLeft: i > 0 ? gutter : undefined
+        }
+      }, _this.renderColumn(column));
     });
   };
 
-  Masonry.prototype.render = function render() {
-    var _props2 = this.props,
-        className = _props2.className,
-        style = _props2.style;
-
-    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-      "div",
-      { style: _extends({}, styles.container, style), className: className },
-      this.renderColumns()
-    );
+  _proto.render = function render() {
+    var _this$props2 = this.props,
+        className = _this$props2.className,
+        style = _this$props2.style;
+    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      style: _extends({
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignContent: "stretch",
+        boxSizing: "border-box",
+        width: "100%"
+      }, style),
+      className: className
+    }, this.renderColumns());
   };
 
   return Masonry;
-}(__WEBPACK_IMPORTED_MODULE_0_react___default.a.Component);
+}(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Component);
 
-Masonry.propTypes = {
-  children: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.oneOfType([__WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.arrayOf(__WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.node), __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.node]).isRequired,
-  columnsCount: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number,
-  gutter: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string,
-  className: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string,
-  style: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.object
+Masonry_Masonry.propTypes = {
+  children: external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.oneOfType([external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.arrayOf(external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.node), external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.node]).isRequired,
+  columnsCount: external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.number,
+  gutter: external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.string,
+  className: external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.string,
+  style: external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.object
 };
-
-Masonry.defaultProps = {
+Masonry_Masonry.defaultProps = {
   columnsCount: 3,
@@ -237,43 +242,30 @@ gutter: "0",
 };
+/* harmony default export */ var src_Masonry = (Masonry_Masonry);
+// CONCATENATED MODULE: ./src/ResponsiveMasonry/index.js
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-/* harmony default export */ __webpack_exports__["a"] = (Masonry);
+function ResponsiveMasonry_inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
-/***/ }),
-/* 5 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__);
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-
-
-
 var DEFAULT_COLUMNS_COUNT = 1;
 
-var MasonryResponsive = function (_React$Component) {
-  _inherits(MasonryResponsive, _React$Component);
+var ResponsiveMasonry_MasonryResponsive = /*#__PURE__*/function (_React$Component) {
+  ResponsiveMasonry_inheritsLoose(MasonryResponsive, _React$Component);
 
   function MasonryResponsive(props) {
-    _classCallCheck(this, MasonryResponsive);
+    var _this;
 
-    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
-
+    _this = _React$Component.call(this, props) || this;
     _this.state = {
       columnsCount: DEFAULT_COLUMNS_COUNT
     };
-
-    _this.handleResize = _this.handleResize.bind(_this);
-    _this.handleRef = _this.handleRef.bind(_this);
+    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
+    _this.handleRef = _this.handleRef.bind(_assertThisInitialized(_this));
     return _this;
   }
 
-  MasonryResponsive.prototype.componentDidMount = function componentDidMount() {
+  var _proto = MasonryResponsive.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
     this.updateColumnsCount();
@@ -283,7 +275,7 @@ window.addEventListener("resize", this.handleResize); // eslint-disable-line
 
-  MasonryResponsive.prototype.componentWillUnmount = function componentWillUnmount() {
+  _proto.componentWillUnmount = function componentWillUnmount() {
     window.removeEventListener("resize", this.handleResize); // eslint-disable-line
   };
 
-  MasonryResponsive.prototype.getSortedBreakPoints = function getSortedBreakPoints() {
+  _proto.getSortedBreakPoints = function getSortedBreakPoints() {
     var breakPoints = Object.keys(this.props.columnsCountBreakPoints);
@@ -295,9 +287,7 @@ return breakPoints.sort(function (a, b) {
 
-  MasonryResponsive.prototype.updateColumnsCount = function updateColumnsCount() {
+  _proto.updateColumnsCount = function updateColumnsCount() {
     var columnsCountBreakPoints = this.props.columnsCountBreakPoints;
-
     var containerWidth = this.container.offsetWidth;
     var breakPoints = this.getSortedBreakPoints();
     var columnsCount = breakPoints.length > 0 ? columnsCountBreakPoints[breakPoints[0]] : DEFAULT_COLUMNS_COUNT;
-
     breakPoints.forEach(function (breakPoint) {
@@ -310,44 +300,44 @@ if (breakPoint < containerWidth) {
     if (columnsCount && columnsCount !== this.state.columnsCount) {
-      this.setState({ columnsCount: columnsCount });
+      this.setState({
+        columnsCount: columnsCount
+      });
     }
   };
 
-  MasonryResponsive.prototype.handleResize = function handleResize() {
+  _proto.handleResize = function handleResize() {
     this.updateColumnsCount();
   };
 
-  MasonryResponsive.prototype.handleRef = function handleRef(ref) {
+  _proto.handleRef = function handleRef(ref) {
     if (!this.container) this.container = ref;
   };
 
-  MasonryResponsive.prototype.render = function render() {
+  _proto.render = function render() {
     var columnsCount = this.state.columnsCount;
-    var _props = this.props,
-        children = _props.children,
-        className = _props.className,
-        style = _props.style;
-
-    return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
-      "div",
-      { ref: this.handleRef, className: className, style: style },
-      __WEBPACK_IMPORTED_MODULE_0_react___default.a.Children.map(children, function (child, index) {
-        return __WEBPACK_IMPORTED_MODULE_0_react___default.a.cloneElement(child, {
-          key: index,
-          columnsCount: columnsCount
-        });
-      })
-    );
+    var _this$props = this.props,
+        children = _this$props.children,
+        className = _this$props.className,
+        style = _this$props.style;
+    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      ref: this.handleRef,
+      className: className,
+      style: style
+    }, external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Children.map(children, function (child, index) {
+      return external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.cloneElement(child, {
+        key: index,
+        columnsCount: columnsCount
+      });
+    }));
   };
 
   return MasonryResponsive;
-}(__WEBPACK_IMPORTED_MODULE_0_react___default.a.Component);
+}(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Component);
 
-MasonryResponsive.propTypes = {
-  children: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.oneOfType([__WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.arrayOf(__WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.node), __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.node]).isRequired,
-  columnsCountBreakPoints: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.object,
-  className: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string,
-  style: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.object
+ResponsiveMasonry_MasonryResponsive.propTypes = {
+  children: external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.oneOfType([external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.arrayOf(external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.node), external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.node]).isRequired,
+  columnsCountBreakPoints: external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.object,
+  className: external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.string,
+  style: external_root_PropTypes_commonjs2_prop_types_commonjs_prop_types_amd_prop_types_default.a.object
 };
-
-MasonryResponsive.defaultProps = {
+ResponsiveMasonry_MasonryResponsive.defaultProps = {
   columnsCountBreakPoints: {
@@ -361,7 +351,11 @@ 350: 1,
 };
+/* harmony default export */ var ResponsiveMasonry = (ResponsiveMasonry_MasonryResponsive);
+// CONCATENATED MODULE: ./src/index.js
 
-/* harmony default export */ __webpack_exports__["a"] = (MasonryResponsive);
 
+/* harmony default export */ var src = __webpack_exports__["default"] = (src_Masonry);
+
+
 /***/ })
 /******/ ])["default"];
 });

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57329

increased by49.07%

Number of package files

13

increased by18.18%

Lines of code

772

increased by16.62%

Number of lines in readme file

120

increased by3.45%

Worsened metrics

Dev dependency count

28

increased by3.7%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes