add default columns

README.md

@@ -8,7 +8,7 @@
 
 * Responsive, accessible, composable, and customizable image gallery component 
 * Maintains the original aspect ratio of your photos
-* Creates a 'masonry' style layout
+* Creates a "masonry" style layout
 * Uses actual image elements, optionally pass in srcSet and sizes attributes
 * Supports row or column direction layout
 * Supports passing in a custom image component for implementation of things like image selection, favorites, captions, or whatever your little heart desires!
@@ -34,7 +34,7 @@ yarn add react-photo-gallery
 * [Basic Row Layout](https://codesandbox.io/s/9yx911wl9y)
 * [Basic Column Layout](https://codesandbox.io/s/r09k1xj614)
 * [With Lightbox](https://codesandbox.io/s/5vn3lvz2n4)
-* [Dynamic Columns](https://codesandbox.io/s/ll7ym48027)
+* [Custom Dynamic Columns](https://codesandbox.io/s/ll7ym48027)
 * [Selection using custom ImageComponent](https://codesandbox.io/s/o7o241q09)
 * [Sortable with drag and drop](https://codesandbox.io/s/8y7n1r9y5j)
 
@@ -81,7 +81,7 @@ const PHOTO_SET = [
 Property        |       Type            |       Default         |       Description
 :-----------------------|:--------------|:--------------|:--------------------------------
 photos | array  | undefined  | required; array of objects
-columns | number  | 3  | optional; number of photos per row
+columns | number  | undefined  | optional; number of photos per row; defaults to Gallery's breakpoint choosing
 onClick | function  | undefined  | optional; do something when the user clicks a photo; receives arguments event and an object containing the index, photo obj originally sent and the next and previous photos in the gallery if they exist
 margin | number  | 2  | optional; number of margin pixels around each entire image
 direction | string | 'row' | optional; `column` or `row` based layout

docs/README.md

@@ -12,9 +12,9 @@ description: A repsonsive image gallery component for React
 
 * Responsive, accessible, composable, and customizable image gallery component 
 * Maintains the original aspect ratio of your photos
-* Creates a 'masonry' style layout
+* Creates a "masonry" style layout
 * Uses actual image elements, optionally pass in srcSet and sizes attributes
-* Supports row or column (masonry) direction layout
+* Supports row or column direction layout
 * Supports passing in a custom image component for implementation of things like image selection, favorites, captions, or whatever your little heart desires!
 * SSR app compatible
 
@@ -38,7 +38,7 @@ yarn add react-photo-gallery
 * [Basic Row Layout](https://codesandbox.io/s/9yx911wl9y)
 * [Basic Column Layout](https://codesandbox.io/s/r09k1xj614)
 * [With Lightbox](https://codesandbox.io/s/5vn3lvz2n4)
-* [Dynamic Columns](https://codesandbox.io/s/ll7ym48027)
+* [Custom Dynamic Columns](https://codesandbox.io/s/ll7ym48027)
 * [Selection using custom ImageComponent](https://codesandbox.io/s/o7o241q09)
 * [Sortable with drag and drop](https://codesandbox.io/s/8y7n1r9y5j)
 
@@ -85,7 +85,7 @@ const PHOTO_SET = [
 Property        |       Type            |       Default         |       Description
 :-----------------------|:--------------|:--------------|:--------------------------------
 photos | array  | undefined  | required; array of objects
-columns | number  | 3  | optional; number of photos per row
+columns | number  | undefined  | optional; number of photos per row; defaults to Gallery's breakpoint choosing
 onClick | function  | undefined  | optional; do something when the user clicks a photo; receives arguments event and an object containing the index, photo obj originally sent and the next and previous photos in the gallery if they exist
 margin | number  | 2  | optional; number of margin pixels around each entire image
 direction | string | 'row' | optional; `column` or `row` based layout

docs/SUMMARY.md

@@ -5,7 +5,7 @@
   * [Basic (Rows)](examples/basic-rows.md)
   * [Basic (Columns)](examples/basic-columns.md)
   * [srcSet and sizes](examples/srcset-and-sizes.md)
-  * [Dynamic Columns](examples/dynamic-columns.md)
+  * [Custom Dynamic Columns](examples/custom-dynamic-columns.md)
   * [Lightbox](examples/lightbox.md)
   * [Selection with custom ImageComponent](examples/selection.md)
   * [Sortable using drag and drop](examples/sortable.md)

docs/examples/custom-dynamic-columns.md

@@ -0,0 +1,16 @@
+# Custom Dynamic Columns
+
+By default, the Gallery chooses the amount of columns per row, based on the width of itself. The default columns are:
+
+```
+columns = 1;
+if (containerWidth >= 500) columns = 2;
+if (containerWidth >= 900) columns = 3;
+if (containerWidth >= 1500) columns = 4;
+```
+
+If you'd like to change the columns based on the container size of your choosing try using [react-measure](https://github.com/souporserious/react-measure) to measure the size of your container. Resize the browser to see this in action.  See example:
+
+<iframe src="https://codesandbox.io/embed/ll7ym48027?hidenavigation=1&view=editor" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+
+

examples/src/ExampleBasic.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import Gallery from 'react-photo-gallery';
 
-const ExampleBasic = ({photos, columns, title, direction}) => {
+const ExampleBasic = ({photos, title, direction}) => {
     return (
       <div>
         <h2>{title}</h2>
-        <Gallery photos={photos} columns={columns} direction={direction}/>
+        <Gallery photos={photos} direction={direction}/>
       </div>
     );
 }

examples/src/ExampleCustomComponentSelection.js

@@ -24,7 +24,7 @@ class ExampleCustomComponentSelection extends React.Component {
         <h2>Using the ImageComponent prop</h2>
         <h3>Pass in a custom image component to create any visual representation such as selection</h3>
         <p><button className="toggle-select" onClick={this.toggleSelect}>toggle select all</button></p>
-        <Gallery photos={this.state.photos} columns={this.props.columns} onClick={this.selectPhoto} ImageComponent={SelectedImage}/>
+        <Gallery photos={this.state.photos} onClick={this.selectPhoto} ImageComponent={SelectedImage}/>
       </div>
     );
   }

examples/src/ExampleDynamicLoading.js

@@ -51,7 +51,7 @@ class ExampleDynamicLoading extends React.Component {
     return (
       <div>
         <h2>Loading Photos Dynamically in Column Layout</h2>
-        <Gallery photos={this.state.photos} columns={this.props.columns} direction={'column'} />
+        <Gallery photos={this.state.photos} direction={'column'} />
         {!this.state.loadedAll && <div className="loading-msg" id="msg-loading-more">Loading</div>}
       </div>
     );

examples/src/ExampleWithLightbox.js

@@ -38,7 +38,7 @@ class ExampleWithLightbox extends React.Component {
     return (
       <div>
         <h2>Using with a Lightbox component</h2>
-        <Gallery photos={this.props.photos} columns={this.props.columns} onClick={this.openLightbox}/>
+        <Gallery photos={this.props.photos} onClick={this.openLightbox}/>
         <Lightbox
           theme={{ container: { background: 'rgba(0, 0, 0, 0.85)' } }}
           images={this.props.photos.map(x => ({ ...x, srcset: x.srcSet, caption: x.title }))}

examples/src/app.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import jsonp from 'jsonp';
-import Measure from 'react-measure';
 import ExampleBasic from './ExampleBasic';
 import ExampleWithLightbox from './ExampleWithLightbox';
 import ExampleCustomComponentSelection from './ExampleCustomComponentSelection';
@@ -62,32 +61,13 @@ class App extends React.Component {
     if (this.state.photos) {
       const width = this.state.width;
       return (
-        <Measure bounds onResize={(contentRect) => this.setState({ width: contentRect.bounds.width })}>
-        {
-          ({ measureRef }) => {
-            if (width < 1 ){
-              return <div ref={measureRef}></div>;
-            }
-					  let columns = 1;
-					  if (width >= 480){
-						  columns = 2;
-					  }
-					  if (width >= 1024){
-						  columns = 3;
-					  }
-					  if (width >= 1824){
-						  columns = 4;
-					  }
-            return <div ref={measureRef} className="App">
-                <ExampleBasic title={'Basic Row Layout'} columns={columns} photos={this.state.photos.slice(0,6)} />
-                <ExampleBasic title={'Basic Column Layout'} direction="column" columns={columns} photos={this.state.photos.slice(6, 12)} />
-                <ExampleWithLightbox columns={columns} photos={this.state.photos.slice(12, 18)} />
-                <ExampleCustomComponentSelection columns={columns} photos={this.state.photos.slice(18, 26)} />
-                <ExampleDynamicLoading columns={columns} photos={this.state.photos} />
-              </div>
-          }
-        }
-		    </Measure>
+        <div className="App">
+          <ExampleBasic title={'Basic Row Layout'} photos={this.state.photos.slice(0,6)} />
+          <ExampleBasic title={'Basic Column Layout'} direction="column" photos={this.state.photos.slice(6, 12)} />
+          <ExampleWithLightbox photos={this.state.photos.slice(12, 18)} />
+          <ExampleCustomComponentSelection photos={this.state.photos.slice(18, 26)} />
+          <ExampleDynamicLoading photos={this.state.photos} />
+        </div>
       );
     } else {
       return (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-photo-gallery",
-  "version": "6.1.7",
+  "version": "6.2.0",
   "description": "Responsive React Photo Gallery Image Component for Masonry Layout",
   "main": "lib/Gallery.js",
   "module": "dist/react-photo-gallery.es.js",
@@ -47,7 +47,6 @@
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-images": "^0.5.18",
-    "react-measure": "^2.0.2",
     "react-test-renderer": "^16.1.1",
     "rollup": "^0.50.0",
     "rollup-plugin-babel": "^3.0.2",

src/Gallery.js

@@ -28,11 +28,21 @@ class Gallery extends React.Component {
   };
 
   render() {
+    const containerWidth = this.state.containerWidth;
     const { ImageComponent = Photo } = this.props;
     // subtract 1 pixel because the browser may round up a pixel
-    const { columns, margin, onClick, direction } = this.props;
+    const { margin, onClick, direction } = this.props;
+    let { columns } = this.props;
+
+    // set default breakpoints if user doesn't specify columns prop
+    if (columns === undefined) {
+      columns = 1;
+      if (containerWidth >= 500) columns = 2;
+      if (containerWidth >= 900) columns = 3;
+      if (containerWidth >= 1500) columns = 4;
+    }
     const photos = this.props.photos;
-    const width = this.state.containerWidth - 1;
+    const width = containerWidth - 1;
     let galleryStyle, thumbs;
 
     if (direction === 'row') {
@@ -78,7 +88,6 @@ Gallery.propTypes = {
 };
 
 Gallery.defaultProps = {
-  columns: 3,
   margin: 2,
   direction: 'row',
 };

yarn.lock

@@ -3416,10 +3416,6 @@ get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
 
-get-node-dimensions@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz#fb7b4bb57060fb4247dd51c9d690dfbec56b0823"
-
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
@@ -6389,14 +6385,6 @@ react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 
-react-measure@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/react-measure/-/react-measure-2.0.2.tgz#072a9a5fafc01dfbadc1fa5fb09fc351037f636c"
-  dependencies:
-    get-node-dimensions "^1.2.0"
-    prop-types "^15.5.10"
-    resize-observer-polyfill "^1.4.2"
-
 react-prop-toggle@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-prop-toggle/-/react-prop-toggle-1.0.2.tgz#8b0b7e74653606b1427cfcf6c4eaa9198330568e"
@@ -6714,7 +6702,7 @@ requires-port@1.0.x, requires-port@1.x.x:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
-resize-observer-polyfill@^1.4.2, resize-observer-polyfill@^1.5.0:
+resize-observer-polyfill@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"