diff --git a/CHANGELOG.md b/CHANGELOG.md index b8bfcb7..2a9b1ce 100644 --- 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 index a7e24d2..8b4ba1c 100644 --- 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 index 46fcb47..d869119 100644 --- 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 index f114b9c..b3e7382 100644 --- 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) => ( -
+
{item}
)) @@ -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