Handle default columns count

cedricdelpoux · Jun 14, 2017 · 35d7a56 · 35d7a56
1 parent 092fce5
commit 35d7a56
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 1.2.3 - 2017-06-14
+
+* Update: handle default columns count
+
 # 1.2.2 - 2017-06-03
 
 * Add: `files` to package.json

diff --git a/README.md b/README.md
@@ -66,7 +66,7 @@ class MyWrapper extends Component {
 
 ### Mansonry component
   * `columnsCount`: Number - injected by ResponsiveMasonry - default 3,
-  * `gutter`: String - margin surrounding each item (in pixels) - default "0",
+  * `gutter`: String - margin surrounding each item - default "0" - eg: "10px",
 
 ### ResponsiveMasonry component
   * `columnsCountBreakPoints`: Object, keys are breakpoints in px, values are the columns number - default {350: 1, 750: 2, 900: 3},

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-masonry",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "React responsive masonry component built with css flexbox",
   "repository": {
     "type": "git",

diff --git a/src/ResponsiveMasonry.js b/src/ResponsiveMasonry.js
@@ -1,6 +1,8 @@
 import React, {Component} from "react"
 import PropTypes from "prop-types"
 
+const DEFAULT_COLUMNS_COUNT = 1
+
 class MasonryResponsive extends Component {
   constructor(props) {
     super(props)
@@ -30,7 +32,9 @@ class MasonryResponsive extends Component {
     const {columnsCountBreakPoints} = this.props
     const containerWidth = this.container.offsetWidth
     const breakPoints = this.getSortedBreakPoints()
-    let columnsCount
+    let columnsCount = breakPoints.length > 0
+      ? columnsCountBreakPoints[breakPoints[0]]
+      : DEFAULT_COLUMNS_COUNT
 
     breakPoints.forEach(breakPoint => {
       if (breakPoint < containerWidth) {