Add: prop on component

cedricdelpoux · Apr 13, 2017 · 2d4e739 · 2d4e739
1 parent 9e159d1
commit 2d4e739
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,3 +2,7 @@
 
 * Add: `Masonry` component
 * Add: `ResponsiveMasonry` component
+
+# 1.1.0 - 2017-04-13
+
+* Add: `gutter` prop on `Mansory` component
diff --git a/README.md b/README.md
@@ -66,6 +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",
 
 ### 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.0.0",
+  "version": "1.1.0",
   "description": "React responsive masonry component built with css flexbox",
   "browser": "./dist/index.js",
   "main": "lib/index.js",

diff --git a/src/Masonry.js b/src/Masonry.js
@@ -17,9 +17,6 @@ const styles = {
     flexGrow: 1,
     flexBasis: 0,
   },
-  item: {
-    margin: "5px",
-  },
 }
 
 class Masonry extends Component {
@@ -41,8 +38,9 @@ class Masonry extends Component {
   }
 
   renderColumn(column) {
+    const {gutter} = this.props
     return column.map((item, i) => (
-      <div key={i} style={styles.item}>
+      <div key={i} style={{margin: gutter}}>
         {item}
       </div>
     ))
@@ -68,10 +66,12 @@ class Masonry extends Component {
 Masonry.propTypes = {
   children: PropTypes.array.isRequired,
   columnsCount: PropTypes.number,
+  gutter: PropTypes.string,
 }
 
 Masonry.defaultProps = {
   columnsCount: 3,
+  gutter: "0",
 }
 
 export default Masonry