pass though sizeMe config prop 'noPlaceholder'

Author: hoschi

README.md

@@ -193,6 +193,7 @@ componentQueries({
       - `[monitorWidth]` (_Boolean_): If `true` then the width of your component will be tracked and provided within the `size` argument to your query functions. Defaults to `true`.
       - `[monitorHeight]` (_Boolean_): If `true` then the height of your component will be tracked and provided within the `size` argument to your query functions. Defaults to `false`.
       - `[refreshRate]` (_Number_): The maximum frequency, in milliseconds, at which size changes should be recalculated when changes in your Component's rendered size are being detected. This must not be set to lower than 16.  Defaults to `16`.
+      - `[noPlaceholder]` (_Boolean_): By default we render a "placeholder" component initially so we can try and "prefetch" the expected size for your component. This is to avoid any unnecessary deep tree renders.  If you feel this is not an issue for your component case and you would like to get an eager render of your component then disable the placeholder using this config option. Defaults to `false`.
       - `[pure]` (_Boolean_): Indicates if your component should be considered "pure", i.e. it should only be rerendered if the result of your query functions change, or if new props are provided to the wrapped component. If you set it to false then the wrapped component will render _every_ time the size changes, even if it doesn't result in new query provided props. Defaults to `true`.
       - [`conflictResolver(prev, current, key) : Any`] \(_Function_): A custom function to use in order to resolve prop conflicts when two or more query functions return a prop with the same key.  This gives you an opportunity to do custom resolution for special prop types, e.g. `className` where you could instead concat the conflicted values.  The default implementation will return the value from the _last_ query function provided in the query array.  Please read the respective section further down in the readme for more info and examples of this.
          - `prev` (_Any_): The value of the conflicted prop provided by the previously executed query function.

src/__tests__/componentQueries.test.js

@@ -92,6 +92,7 @@ describe('Given the ComponentQueries library', () => {
           sizeMeConfig: {
             monitorHeight: true,
             monitorWidth: false,
+            noPlaceholder: true,
             refreshRate: 200,
           },
         })(() => <div />)
@@ -100,6 +101,7 @@ describe('Given the ComponentQueries library', () => {
           monitorHeight: true,
           monitorWidth: false,
           refreshRate: 200,
+          noPlaceholder: true,
         })
       })
     })
@@ -115,6 +117,7 @@ describe('Given the ComponentQueries library', () => {
             monitorWidth: false,
             refreshRate: 200,
             refreshMode: 'debounce',
+            noPlaceholder: true,
             conflictResolver,
           },
         })(() => <div />)
@@ -124,6 +127,7 @@ describe('Given the ComponentQueries library', () => {
           monitorWidth: false,
           refreshRate: 200,
           refreshMode: 'debounce',
+          noPlaceholder: true,
         })
       })
     })

src/componentQueries.js

@@ -11,6 +11,7 @@ const defaultConfig = {
   monitorWidth: true,
   refreshRate: 16,
   pure: true,
+  noPlaceholder: false,
 }
 
 const defaultConflictResolver = (x, y) => y
@@ -49,20 +50,19 @@ function componentQueries(...params) {
         monitorWidth,
         refreshRate,
         refreshMode,
+        noPlaceholder,
       } = params[0].config
       sizeMeConfig = {
-        monitorHeight: monitorHeight != null
-          ? monitorHeight
-          : defaultConfig.monitorHeight,
-        monitorWidth: monitorWidth != null
-          ? monitorWidth
-          : defaultConfig.monitorWidth,
-        refreshRate: refreshRate != null
-          ? refreshRate
-          : defaultConfig.refreshRate,
-        refreshMode: refreshMode != null
-          ? refreshMode
-          : defaultConfig.refreshMode,
+        monitorHeight:
+          monitorHeight != null ? monitorHeight : defaultConfig.monitorHeight,
+        monitorWidth:
+          monitorWidth != null ? monitorWidth : defaultConfig.monitorWidth,
+        refreshRate:
+          refreshRate != null ? refreshRate : defaultConfig.refreshRate,
+        refreshMode:
+          refreshMode != null ? refreshMode : defaultConfig.refreshMode,
+        noPlaceholder:
+          noPlaceholder != null ? noPlaceholder : defaultConfig.noPlaceholder,
       }
     }
     conflictResolver =