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"}} alt="" />
        		)}
        	</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>
    )
  }
}

npm run clean

npm run build

npm run watch

npm run lint