Accept "sizePassthrough" prop

.gitignore

@@ -13,3 +13,5 @@ coverage
 
 # Build output
 build
+
+.DS_Store

.npmignore

@@ -0,0 +1 @@
+.DS_Store

README.md

@@ -110,7 +110,7 @@ So, to recap, some of the benefits of using this abstraction are:
 
   - Simplify your components by moving the dimension logic away from them, which in turn is easier to test in isolation.
   - `shouldComponentUpdate` is implemented on your behalf.
-  - The _query functions_ themselves can be formed into a reusable library of queries for all your components.  
+  - The _query functions_ themselves can be formed into a reusable library of queries for all your components.
 
 I am not trying to take away from `react-sizeme`, but I want to highlight that it's a bit more of a low level HOC, and if you want to use it you should be aware of the problems above and consider using your own abstraction or this one.
 
@@ -156,7 +156,7 @@ componentQueries(
 
   - `query(size, [ownProps]) : props` (_Function_): A query function which can be provided as a set of arguments, or can be contained within an array containing one or more queries.
     - `size` (_Object_): Contains the current dimensions of your wrapped component. As the default configuration is being used, it will only contain th e `width` dimension.
-       - `width` (_Number_): The current width of your component.  
+       - `width` (_Number_): The current width of your component.
     - [`ownProps`] \(_Object_): The additional props which have been provided to your wrapped component.
 
 ### _Configured_: `componentQueries(config)`
@@ -175,7 +175,8 @@ componentQueries({
     monitorWidth: true,
     monitorHeight: false,
     refreshRate: 16,
-    pure: true
+    pure: true,
+    sizePassthrough: 'componentDimensions'
   }
 })(MyComponent)
 ```
@@ -186,15 +187,16 @@ componentQueries({
     - `queries` (_Array_): An array of query functions:
       - `query(size, [ownProps]) : props` (_Function_): A query function which can be provided as a set of arguments, or can be contained within an array containing one or more queries.
         - `size` (_Object_): Contains the current dimensions of your wrapped component.
-          - `[width]` (_Number_): Will only be provided if the `monitorWidth` configuration option is set to `true`. The current width of your component.  
-          - `[height]` (_Number_): Will only be provided if the `monitorHeight` configuration option is set to `true`. The current height of your component.  
+          - `[width]` (_Number_): Will only be provided if the `monitorWidth` configuration option is set to `true`. The current width of your component.
+          - `[height]` (_Number_): Will only be provided if the `monitorHeight` configuration option is set to `true`. The current height of your component.
         - [`ownProps`] \(_Object_): The additional props which have been provided to your wrapped component.
     - `[config]` (_Object_): Custom configuration.
       - `[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`.
+      - `[sizePassthrough]` (_Boolean_ || _String_): If you need the size object to be passed to your component on every render, settings this to true will pass it as the `size` prop.  If `sizePassthrough` is a _String_, the `size` object will be passed as the given string.
       - [`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.
          - `current` (_Any_): The value of the conflicted prop provided by the most recently executed query function.
@@ -274,7 +276,7 @@ As you can see we expose a `sizeMeConfig`, please see the [`react-sizeme`](https
 
 ## Prop Conflict Handling
 
-As it is possible for you to provide props from multiple queries there could be cases where prop clashing occurs.  By default we have an order of preference for which prop value should be resolved in the case of conflicts.  
+As it is possible for you to provide props from multiple queries there could be cases where prop clashing occurs.  By default we have an order of preference for which prop value should be resolved in the case of conflicts.
 
 __The rule is:__ Custom passed in props take preference followed by the last item in the query collection.
 

commonjs/componentQueries.js

@@ -8,7 +8,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _react = require('react');
 
-var _react2 = _interopRequireDefault(_react);
+var React = _interopRequireWildcard(_react);
 
 var _propTypes = require('prop-types');
 
@@ -36,6 +36,8 @@ var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -47,9 +49,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 var defaultConfig = {
   monitorHeight: false,
   monitorWidth: true,
+  monitorPosition: false,
   refreshRate: 16,
   pure: true,
-  noPlaceholder: false
+  noPlaceholder: false,
+  sizePassthrough: undefined
 };
 
 var defaultConflictResolver = function defaultConflictResolver(x, y) {
@@ -60,6 +64,7 @@ var defaultSizeMeConfig = function defaultSizeMeConfig() {
   return {
     monitorWidth: defaultConfig.monitorWidth,
     monitorHeight: defaultConfig.monitorHeight,
+    monitorPosition: defaultConfig.monitorPosition,
     refreshRate: defaultConfig.refreshRate
   };
 };
@@ -77,6 +82,7 @@ function componentQueries() {
   var sizeMeConfig = void 0;
   var pure = void 0;
   var conflictResolver = void 0;
+  var sizePassthrough = void 0;
 
   for (var _len = arguments.length, params = Array(_len), _key = 0; _key < _len; _key++) {
     params[_key] = arguments[_key];
@@ -88,19 +94,26 @@ function componentQueries() {
       // Old school config style.
       sizeMeConfig = params[0].sizeMeConfig || defaultSizeMeConfig();
       pure = defaultConfig.pure; // this didn't exist before, so we default it.
+      sizePassthrough = defaultConfig.sizePassthrough;
     } else if (params[0].config) {
       // New school config style.
       pure = params[0].config.pure;
+      sizePassthrough = params[0].config.sizePassthrough;
+      if (sizePassthrough === true) {
+        sizePassthrough = 'size';
+      }
       var _params$0$config = params[0].config,
           monitorHeight = _params$0$config.monitorHeight,
           monitorWidth = _params$0$config.monitorWidth,
+          monitorPosition = _params$0$config.monitorPosition,
           refreshRate = _params$0$config.refreshRate,
           refreshMode = _params$0$config.refreshMode,
           noPlaceholder = _params$0$config.noPlaceholder;
 
       sizeMeConfig = {
         monitorHeight: monitorHeight != null ? monitorHeight : defaultConfig.monitorHeight,
         monitorWidth: monitorWidth != null ? monitorWidth : defaultConfig.monitorWidth,
+        monitorPosition: monitorPosition !== null ? monitorPosition : defaultConfig.monitorPosition,
         refreshRate: refreshRate != null ? refreshRate : defaultConfig.refreshRate,
         refreshMode: refreshMode != null ? refreshMode : defaultConfig.refreshMode,
         noPlaceholder: noPlaceholder != null ? noPlaceholder : defaultConfig.noPlaceholder
@@ -132,8 +145,8 @@ function componentQueries() {
   };
 
   return function WrapComponent(WrappedComponent) {
-    var ComponentWithComponentQueries = function (_Component) {
-      _inherits(ComponentWithComponentQueries, _Component);
+    var ComponentWithComponentQueries = function (_React$Component) {
+      _inherits(ComponentWithComponentQueries, _React$Component);
 
       function ComponentWithComponentQueries() {
         var _ref;
@@ -208,12 +221,16 @@ function componentQueries() {
 
           var allProps = (0, _mergeWith2.default)(this.state.queryResult, otherProps, mergeWithCustomizer);
 
-          return _react2.default.createElement(WrappedComponent, allProps);
+          if (sizePassthrough) {
+            allProps[sizePassthrough] = size;
+          }
+
+          return React.createElement(WrappedComponent, allProps);
         }
       }]);
 
       return ComponentWithComponentQueries;
-    }(_react.Component);
+    }(React.Component);
 
     ComponentWithComponentQueries.displayName = 'ComponentQueries(' + (0, _getDisplayName2.default)(WrappedComponent) + ')';
     ComponentWithComponentQueries.propTypes = {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-component-queries",
-  "description": "Provide props to your Components based on their Width and/or Height.",
   "version": "2.2.0",
+  "description": "Provide props to your Components based on their Width and/or Height.",
   "license": "MIT",
   "main": "commonjs/index.js",
   "files": [
@@ -62,8 +62,8 @@
     "eslint": "^4.7.2",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^5.0.3",
-    "eslint-plugin-react": "^7.3.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-react": "^7.4.0",
     "gzip-size": "^4.0.0",
     "husky": "^0.14.3",
     "in-publish": "^2.0.0",

src/__tests__/componentQueries.test.js

@@ -80,6 +80,7 @@ describe('Given the ComponentQueries library', () => {
         expect(sizeMeConfig).toMatchObject({
           monitorHeight: false,
           monitorWidth: true,
+          monitorPosition: false,
           refreshRate: 16,
         })
       })
@@ -91,6 +92,7 @@ describe('Given the ComponentQueries library', () => {
           queries: [() => ({})],
           sizeMeConfig: {
             monitorHeight: true,
+            monitorPosition: true,
             monitorWidth: false,
             noPlaceholder: true,
             refreshRate: 200,
@@ -100,6 +102,7 @@ describe('Given the ComponentQueries library', () => {
         expect(sizeMeConfig).toMatchObject({
           monitorHeight: true,
           monitorWidth: false,
+          monitorPosition: true,
           refreshRate: 200,
           noPlaceholder: true,
         })