Initial commit

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ]
+}

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+[*.md]
+indent_size = 4
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,17 @@
+{
+  "parser": "babel-eslint",
+  "plugins": ["react"],
+  "extends": "airbnb",
+  "rules": {
+    "arrow-parens": 0,
+    "class-methods-use-this": 0,
+    "comma-dangle": 0,
+    "object-curly-spacing": [2, "never"],
+    "quotes": [1, "double", "avoid-escape"],
+    "no-return-assign": 0,
+    "react/forbid-prop-types": 0,
+    "react/jsx-filename-extension": 0,
+    "react/no-array-index-key": 0,
+    "semi": [2, "never"]
+  }
+}

.gitignore

@@ -0,0 +1,4 @@
+lib
+dist
+node_modules
+npm-debug.log

CHANGELOG.md

@@ -0,0 +1,4 @@
+# 1.0.0 - 2017-04-05
+
+* Add: `Masonry` component
+* Add: `ResponsiveMasonry` component

LICENCE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Cédric Delpoux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,111 @@
+# react-responsive-masonry ![npm](https://img.shields.io/npm/v/react-responsive-masonry.svg) ![license](https://img.shields.io/npm/l/react-responsive-masonry.svg) ![github-issues](https://img.shields.io/github/issues/xuopled/react-responsive-masonry.svg)
+
+React responsive masonry component built with css flexbox with no dependencies
+
+## Install
+
+```sh
+npm install --save react-responsive-masonry
+```
+
+## Example
+
+![React-responsive-masonry gif](/screenshots/example.gif)
+
+## Usage
+
+If you want the number of columns change by resizing the window, you need to wrap the `Masonry` component by the `ResponsiveMasonry` component.
+Otherwise, you only need to use the `Masonry` component.
+
+```js
+import React, {Component} from "react"
+import Masonry, {ResponsiveMasonry} from "react-responsive-masonry"
+
+const images = [
+    "https://unsplash.it/200/300?image=1050",
+    "https://unsplash.it/400/400?image=1039",
+    "https://unsplash.it/400/300?image=1017",
+    "https://unsplash.it/200/200?image=997",
+    "https://unsplash.it/500/400?image=287",
+    "https://unsplash.it/400/500?image=955",
+    "https://unsplash.it/200/300?image=916",
+    "https://unsplash.it/300/300?image=110",
+    "https://unsplash.it/300/300?image=206",
+]
+
+// The number of columns change by resizing the window
+class MyWrapper extends Component {
+  render() {
+    return (
+        <ResponsiveMasonry columnsCountBreakPoints={{350: 1, 750: 2, 900: 3}}>
+        	<Masonry>
+        		{images.map((image, i) =>
+        			<img key={i} src={image} style={{width: "100%", display: "block"}} />
+        		)}
+        	</Masonry>
+    	</ResponsiveMasonry>
+    )
+  }
+}
+
+// The number of columns don't change by resizing the window
+class MyWrapper extends Component {
+  render() {
+    return (
+    	<Masonry columnsCount={3}>
+    		{images.map((image, i) =>
+    			<img key={i} src={image} style={{width: "100%", display: "block"}} />
+    		)}
+    	</Masonry>
+    )
+  }
+}
+```
+
+## Props
+
+### Mansonry component
+  * `columnsCount`: Number - injected by ResponsiveMasonry - default 3,
+
+### ResponsiveMasonry component
+  * `columnsCountBreakPoints`: Object, keys are breakpoints in px, values are the columns number - default {350: 1, 750: 2, 900: 3},
+
+## Development
+
+### Clean `lib` and `dist` folders
+
+```js
+npm run clean
+```
+
+### Build `lib` folder
+
+```js
+npm run build
+```
+
+### Build `dist` folder
+
+```js
+npm run dist
+```
+
+### Watch `src` folder
+
+```js
+npm run watch
+```
+
+### Lint `src` folder
+
+```js
+npm run lint
+```
+
+## Changelog
+
+See [changelog](./CHANGELOG.md)
+
+## License
+
+See [MIT](./LICENCE)

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "react-responsive-masonry",
+  "version": "1.0.0",
+  "description": "React responsive masonry component built with css flexbox",
+  "browser": "./dist/index.js",
+  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xuopled/react-responsive-masonry.git"
+  },
+  "keywords": [
+    "react",
+    "masonry",
+    "css",
+    "flexbox",
+    "responsive"
+  ],
+  "author": "Cédric Delpoux <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/xuopled/react-responsive-masonry/issues"
+  },
+  "homepage": "https://github.com/xuopled/react-responsive-masonry#readme",
+  "devDependencies": {
+    "babel-cli": "^6.24.0",
+    "babel-eslint": "^7.2.1",
+    "babel-preset-es2015": "^6.24.0",
+    "babel-preset-react": "^6.23.0",
+    "eslint": "^3.18.0",
+    "eslint-config-airbnb": "^14.1.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.10.3",
+    "webpack": "^2.3.2"
+  },
+  "peerDependencies": {
+    "react": "^15.0.0"
+  },
+  "scripts": {
+    "clean": "rm -rf lib dist",
+    "lint": "eslint src/",
+    "dist": "webpack -p",
+    "build": "babel ./src --out-dir ./lib --source-maps -d lib/",
+    "watch": "webpack --progress --colors --watch",
+    "prepublish": "npm run clean && npm run build && npm run dist"
+  }
+}

src/Masonry.js

@@ -0,0 +1,77 @@
+import React, {Component, PropTypes} from "react"
+
+const 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,
+  },
+  item: {
+    margin: "5px",
+  },
+}
+
+class Masonry extends Component {
+  getColumns() {
+    const {children, columnsCount} = this.props
+    const columns = []
+
+    React.Children.forEach(children, (child, index) => {
+      const columnIndex = index % columnsCount
+
+      if (!Array.isArray(columns[columnIndex])) {
+        columns[columnIndex] = []
+      }
+
+      columns[columnIndex].push(child)
+    })
+
+    return columns
+  }
+
+  renderColumn(column) {
+    return column.map((item, i) => (
+      <div key={i} style={styles.item}>
+        {item}
+      </div>
+    ))
+  }
+
+  renderColumns() {
+    return this.getColumns().map((column, i) => (
+      <div key={i} style={styles.column}>
+        {this.renderColumn(column)}
+      </div>
+    ))
+  }
+
+  render() {
+    return (
+      <div style={styles.container}>
+        {this.renderColumns()}
+      </div>
+    )
+  }
+}
+
+Masonry.propTypes = {
+  children: PropTypes.array.isRequired,
+  columnsCount: PropTypes.number,
+}
+
+Masonry.defaultProps = {
+  columnsCount: 3,
+}
+
+export default Masonry

src/ResponsiveMasonry.js

@@ -0,0 +1,76 @@
+import React, {Component, PropTypes} from "react"
+
+class MasonryResponsive extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      columnsCount: null,
+    }
+
+    this.handleResize = this.handleResize.bind(this)
+  }
+
+  componentDidMount() {
+    this.updateColumnsCount()
+    window.addEventListener("resize", this.handleResize) // eslint-disable-line
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.handleResize) // eslint-disable-line
+  }
+
+  getSortedBreakPoints() {
+    const breakPoints = Object.keys(this.props.columnsCountBreakPoints)
+    return breakPoints.sort((a, b) => a - b)
+  }
+
+  updateColumnsCount() {
+    const {columnsCountBreakPoints} = this.props
+    const containerWidth = this.container.offsetWidth
+    const breakPoints = this.getSortedBreakPoints()
+    let columnsCount
+
+    breakPoints.forEach(breakPoint => {
+      if (breakPoint < containerWidth) {
+        columnsCount = columnsCountBreakPoints[breakPoint]
+      }
+    })
+
+    if (columnsCount && columnsCount !== this.state.columnsCount) {
+      this.setState({columnsCount})
+    }
+  }
+
+  handleResize() {
+    this.updateColumnsCount()
+  }
+
+  render() {
+    return (
+      <div ref={ref => this.container = ref}>
+        {React.Children.map(this.props.children, (child, index) =>
+          React.cloneElement(child, {
+            key: index,
+            columnsCount: this.state.columnsCount,
+          })
+        )}
+      </div>
+    )
+  }
+}
+
+MasonryResponsive.propTypes = {
+  children: PropTypes.any.isRequired,
+  columnsCountBreakPoints: PropTypes.object,
+}
+
+MasonryResponsive.defaultProps = {
+  columnsCountBreakPoints: {
+    350: 1,
+    750: 2,
+    900: 3,
+  },
+}
+
+export default MasonryResponsive

src/index.js

@@ -0,0 +1,5 @@
+import Masonry from "./Masonry"
+import ResponsiveMasonry from "./ResponsiveMasonry"
+
+export default Masonry
+export {ResponsiveMasonry}