react-responsive - npm Package Compare versions

Comparing version 6.1.2 to 7.0.0

CHANGELOG.md

 ## Change Log
 
+### v7.0.0
+
+- Adds Context support to make testing and server-side rendering much easier (Thanks to @Tomekmularczyk)
+  - See README for more info on how to use it
+- Require React v16.8.0 or higher
+
 ### v6.1.2
@@ -4,0 +10,0 @@

dist/react-responsive.js

 !function(root, factory) {
-    "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("react")) : "function" == typeof define && define.amd ? define([ "react" ], factory) : "object" == typeof exports ? exports.MediaQuery = factory(require("react")) : root.MediaQuery = factory(root.react);
+    "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("react")) : "function" == typeof define && define.amd ? define([ "react" ], factory) : "object" == typeof exports ? exports.MediaQuery = factory(require("react")) : root.MediaQuery = factory(root.React);
 }("undefined" != typeof self ? self : this, function(__WEBPACK_EXTERNAL_MODULE_6__) {
@@ -130,2 +130,11 @@ return function(modules) {
         "use strict";
+        function _extends() {
+            return _extends = Object.assign || function(target) {
+                for (var i = 1; i < arguments.length; i++) {
+                    var source = arguments[i];
+                    for (var key in source) Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
+                }
+                return target;
+            }, _extends.apply(this, arguments);
+        }
         function _typeof(obj) {
@@ -201,3 +210,7 @@ return (_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj) {
         }), __webpack_require__.d(__webpack_exports__, "default", function() {
+            return MediaQueryContextConsumer;
+        }), __webpack_require__.d(__webpack_exports__, "MediaQuery", function() {
             return MediaQuery;
+        }), __webpack_require__.d(__webpack_exports__, "Context", function() {
+            return Context;
         });
@@ -277,2 +290,9 @@ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(6), __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__), __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(0), __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__), __WEBPACK_IMPORTED_MODULE_2_matchmediaquery__ = __webpack_require__(11), __WEBPACK_IMPORTED_MODULE_2_matchmediaquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_matchmediaquery__), __WEBPACK_IMPORTED_MODULE_3_hyphenate_style_name__ = __webpack_require__(3), __WEBPACK_IMPORTED_MODULE_4__mediaQuery__ = __webpack_require__(4), __WEBPACK_IMPORTED_MODULE_5__toQuery__ = __webpack_require__(13);
         });
+        var Context = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext(), MediaQueryContextConsumer = function(props) {
+            var values = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useContext(Context);
+            return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(MediaQuery, _extends({
+                values: values
+            }, props));
+        };
+        MediaQueryContextConsumer.displayName = "MediaQueryContextConsumer";
     }, function(module, exports) {
@@ -279,0 +299,0 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_6__;

dist/react-responsive.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.MediaQuery=t(require("react")):e.MediaQuery=t(e.react)}("undefined"!=typeof self?self:this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=3)}([function(e,t,n){e.exports=n(5)()},function(e,t,n){"use strict";function r(e){return"-"+e.toLowerCase()}function o(e){if(c.hasOwnProperty(e))return c[e];var t=e.replace(a,r);return c[e]=i.test(t)?"-"+t:t}var a=/[A-Z]/g,i=/^ms-/,c={};t.a=o},function(e,t,n){"use strict";function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){o(e,t,n[t])})}return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var a=n(0),i=n.n(a),c=i.a.oneOfType([i.a.string,i.a.number]),u={orientation:i.a.oneOf(["portrait","landscape"]),scan:i.a.oneOf(["progressive","interlace"]),aspectRatio:i.a.string,deviceAspectRatio:i.a.string,height:c,deviceHeight:c,width:c,deviceWidth:c,color:i.a.bool,colorIndex:i.a.bool,monochrome:i.a.bool,resolution:c},s=r({minAspectRatio:i.a.string,maxAspectRatio:i.a.string,minDeviceAspectRatio:i.a.string,maxDeviceAspectRatio:i.a.string,minHeight:c,maxHeight:c,minDeviceHeight:c,maxDeviceHeight:c,minWidth:c,maxWidth:c,minDeviceWidth:c,maxDeviceWidth:c,minColor:i.a.number,maxColor:i.a.number,minColorIndex:i.a.number,maxColorIndex:i.a.number,minMonochrome:i.a.number,maxMonochrome:i.a.number,minResolution:c,maxResolution:c},u),f={all:i.a.bool,grid:i.a.bool,aural:i.a.bool,braille:i.a.bool,handheld:i.a.bool,print:i.a.bool,projection:i.a.bool,screen:i.a.bool,tty:i.a.bool,tv:i.a.bool,embossed:i.a.bool},l=r({},f,s);u.type=Object.keys(f),t.a={all:l,types:f,matchers:u,features:s}},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function i(e,t,n){return t&&a(e.prototype,t),n&&a(e,n),e}function c(e,t){return!t||"object"!==r(t)&&"function"!=typeof t?s(e):t}function u(e){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function s(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function f(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&l(e,t)}function l(e,t){return(l=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){m(e,t,n[t])})}return e}function m(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"default",function(){return M});var d=n(4),h=n.n(d),y=n(0),b=n.n(y),v=n(7),g=n.n(v),O=n(1),w=n(2),x=n(9);n.d(t,"toQuery",function(){return x.a});var j={component:b.a.node,query:b.a.string,values:b.a.shape(w.a.matchers),children:b.a.oneOfType([b.a.node,b.a.func]),onChange:b.a.func},P=Object.keys(j),_=function(e,t){var n=p({},e);return t.forEach(function(e){return delete n[e]}),n},C=function(e){var t=e.values;if(!t)return null;var n=Object.keys(t);return 0===n.length?null:n.reduce(function(e,n){return e[Object(O.a)(n)]=t[n],e},{})},q=function(e){return e.query||Object(x.a)(_(e,P))},M=function(e){function t(){var e,n;o(this,t);for(var r=arguments.length,a=new Array(r),i=0;i<r;i++)a[i]=arguments[i];return n=c(this,(e=u(t)).call.apply(e,[this].concat(a))),m(s(n),"state",{matches:!1,mq:null,query:"",values:null}),m(s(n),"componentDidMount",function(){n.state.mq.addListener(n.updateMatches),n.updateMatches()}),m(s(n),"componentDidUpdate",function(e,t){n.state.mq!==t.mq&&(n.cleanupMediaQuery(t.mq),n.state.mq.addListener(n.updateMatches)),n.props.onChange&&t.matches!==n.state.matches&&n.props.onChange(n.state.matches)}),m(s(n),"componentWillUnmount",function(){n._unmounted=!0,n.cleanupMediaQuery(n.state.mq)}),m(s(n),"cleanupMediaQuery",function(e){e&&(e.removeListener(n.updateMatches),e.dispose())}),m(s(n),"updateMatches",function(){n._unmounted||n.state.mq.matches!==n.state.matches&&n.setState({matches:n.state.mq.matches})}),m(s(n),"render",function(){return"function"==typeof n.props.children?n.props.children(n.state.matches):n.state.matches?n.props.children:null}),n}return f(t,e),i(t,null,[{key:"getDerivedStateFromProps",value:function(e,t){var n=q(e);if(!n)throw new Error("Invalid or missing MediaQuery!");var r=C(e);if(n===t.query&&r===t.values)return null;var o=g()(n,r||{},!!r);return{matches:o.matches,mq:o,query:n,values:r}}}]),t}(h.a.Component);m(M,"displayName","MediaQuery"),m(M,"defaultProps",{values:null})},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(){}function o(){}var a=n(6);o.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,o,i){if(i!==a){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:r};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";function r(e,t,n){function r(e){f&&f.addListener(e)}function o(e){f&&f.removeListener(e)}function c(e){s.matches=e.matches,s.media=e.media}function u(){f&&f.removeListener(c)}var s=this;if(i&&!n){var f=i.call(window,e);this.matches=f.matches,this.media=f.media,f.addListener(c)}else this.matches=a(e,t),this.media=e;this.addListener=r,this.removeListener=o,this.dispose=u}function o(e,t,n){return new r(e,t,n)}var a=n(8).match,i="undefined"!=typeof window?window.matchMedia:null;e.exports=o},function(e,t,n){"use strict";function r(e,t){return o(e).some(function(e){var n=e.inverse,r="all"===e.type||t.type===e.type;if(r&&n||!r&&!n)return!1;var o=e.expressions.every(function(e){var n=e.feature,r=e.modifier,o=e.value,u=t[n];if(!u)return!1;switch(n){case"orientation":case"scan":return u.toLowerCase()===o.toLowerCase();case"width":case"height":case"device-width":case"device-height":o=c(o),u=c(u);break;case"resolution":o=i(o),u=i(u);break;case"aspect-ratio":case"device-aspect-ratio":case"device-pixel-ratio":o=a(o),u=a(u);break;case"grid":case"color":case"color-index":case"monochrome":o=parseInt(o,10)||1,u=parseInt(u,10)||0}switch(r){case"min":return u>=o;case"max":return u<=o;default:return u===o}});return o&&!n||!o&&n})}function o(e){return e.split(",").map(function(e){e=e.trim();var t=e.match(u),n=t[1],r=t[2],o=t[3]||"",a={};return a.inverse=!!n&&"not"===n.toLowerCase(),a.type=r?r.toLowerCase():"all",o=o.match(/\([^\)]+\)/g)||[],a.expressions=o.map(function(e){var t=e.match(s),n=t[1].toLowerCase().match(f);return{modifier:n[1],feature:n[2],value:t[2]}}),a})}function a(e){var t,n=Number(e);return n||(t=e.match(/^(\d+)\s*\/\s*(\d+)$/),n=t[1]/t[2]),n}function i(e){var t=parseFloat(e);switch(String(e).match(p)[1]){case"dpcm":return t/2.54;case"dppx":return 96*t;default:return t}}function c(e){var t=parseFloat(e);switch(String(e).match(l)[1]){case"em":case"rem":return 16*t;case"cm":return 96*t/2.54;case"mm":return 96*t/2.54/10;case"in":return 96*t;case"pt":return 72*t;case"pc":return 72*t/12;default:return t}}t.match=r,t.parse=o;var u=/(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i,s=/\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/,f=/^(?:(min|max)-)?(.+)/,l=/(em|rem|px|cm|mm|in|pt|pc)?$/,p=/(dpi|dpcm|dppx)?$/},function(e,t,n){"use strict";function r(e,t){var n=Object(a.a)(e);return"number"==typeof t&&(t="".concat(t,"px")),!0===t?e:!1===t?c(e):"(".concat(n,": ").concat(t,")")}function o(e){return e.join(" and ")}var a=n(1),i=n(2),c=function(e){return"not ".concat(e)};t.a=function(e){var t=[];return Object.keys(i.a.all).forEach(function(n){var o=e[n];null!=o&&t.push(r(n,o))}),o(t)}}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.MediaQuery=t(require("react")):e.MediaQuery=t(e.React)}("undefined"!=typeof self?self:this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=3)}([function(e,t,n){e.exports=n(5)()},function(e,t,n){"use strict";function r(e){return"-"+e.toLowerCase()}function o(e){if(c.hasOwnProperty(e))return c[e];var t=e.replace(a,r);return c[e]=i.test(t)?"-"+t:t}var a=/[A-Z]/g,i=/^ms-/,c={};t.a=o},function(e,t,n){"use strict";function r(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){o(e,t,n[t])})}return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var a=n(0),i=n.n(a),c=i.a.oneOfType([i.a.string,i.a.number]),u={orientation:i.a.oneOf(["portrait","landscape"]),scan:i.a.oneOf(["progressive","interlace"]),aspectRatio:i.a.string,deviceAspectRatio:i.a.string,height:c,deviceHeight:c,width:c,deviceWidth:c,color:i.a.bool,colorIndex:i.a.bool,monochrome:i.a.bool,resolution:c},s=r({minAspectRatio:i.a.string,maxAspectRatio:i.a.string,minDeviceAspectRatio:i.a.string,maxDeviceAspectRatio:i.a.string,minHeight:c,maxHeight:c,minDeviceHeight:c,maxDeviceHeight:c,minWidth:c,maxWidth:c,minDeviceWidth:c,maxDeviceWidth:c,minColor:i.a.number,maxColor:i.a.number,minColorIndex:i.a.number,maxColorIndex:i.a.number,minMonochrome:i.a.number,maxMonochrome:i.a.number,minResolution:c,maxResolution:c},u),f={all:i.a.bool,grid:i.a.bool,aural:i.a.bool,braille:i.a.bool,handheld:i.a.bool,print:i.a.bool,projection:i.a.bool,screen:i.a.bool,tty:i.a.bool,tv:i.a.bool,embossed:i.a.bool},l=r({},f,s);u.type=Object.keys(f),t.a={all:l,types:f,matchers:u,features:s}},function(e,t,n){"use strict";function r(){return r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},r.apply(this,arguments)}function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function c(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}function u(e,t){return!t||"object"!==o(t)&&"function"!=typeof t?f(e):t}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function l(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&p(e,t)}function p(e,t){return(p=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function m(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){d(e,t,n[t])})}return e}function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"default",function(){return k}),n.d(t,"MediaQuery",function(){return S}),n.d(t,"Context",function(){return L});var h=n(4),y=n.n(h),b=n(0),v=n.n(b),g=n(7),O=n.n(g),w=n(1),x=n(2),j=n(9);n.d(t,"toQuery",function(){return j.a});var P={component:v.a.node,query:v.a.string,values:v.a.shape(x.a.matchers),children:v.a.oneOfType([v.a.node,v.a.func]),onChange:v.a.func},C=Object.keys(P),_=function(e,t){var n=m({},e);return t.forEach(function(e){return delete n[e]}),n},M=function(e){var t=e.values;if(!t)return null;var n=Object.keys(t);return 0===n.length?null:n.reduce(function(e,n){return e[Object(w.a)(n)]=t[n],e},{})},q=function(e){return e.query||Object(j.a)(_(e,C))},S=function(e){function t(){var e,n;a(this,t);for(var r=arguments.length,o=new Array(r),i=0;i<r;i++)o[i]=arguments[i];return n=u(this,(e=s(t)).call.apply(e,[this].concat(o))),d(f(n),"state",{matches:!1,mq:null,query:"",values:null}),d(f(n),"componentDidMount",function(){n.state.mq.addListener(n.updateMatches),n.updateMatches()}),d(f(n),"componentDidUpdate",function(e,t){n.state.mq!==t.mq&&(n.cleanupMediaQuery(t.mq),n.state.mq.addListener(n.updateMatches)),n.props.onChange&&t.matches!==n.state.matches&&n.props.onChange(n.state.matches)}),d(f(n),"componentWillUnmount",function(){n._unmounted=!0,n.cleanupMediaQuery(n.state.mq)}),d(f(n),"cleanupMediaQuery",function(e){e&&(e.removeListener(n.updateMatches),e.dispose())}),d(f(n),"updateMatches",function(){n._unmounted||n.state.mq.matches!==n.state.matches&&n.setState({matches:n.state.mq.matches})}),d(f(n),"render",function(){return"function"==typeof n.props.children?n.props.children(n.state.matches):n.state.matches?n.props.children:null}),n}return l(t,e),c(t,null,[{key:"getDerivedStateFromProps",value:function(e,t){var n=q(e);if(!n)throw new Error("Invalid or missing MediaQuery!");var r=M(e);if(n===t.query&&r===t.values)return null;var o=O()(n,r||{},!!r);return{matches:o.matches,mq:o,query:n,values:r}}}]),t}(y.a.Component);d(S,"displayName","MediaQuery"),d(S,"defaultProps",{values:null});var L=y.a.createContext(),k=function(e){var t=y.a.useContext(L);return y.a.createElement(S,r({values:t},e))};k.displayName="MediaQueryContextConsumer"},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(){}function o(){}var a=n(6);o.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,o,i){if(i!==a){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:r};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";function r(e,t,n){function r(e){f&&f.addListener(e)}function o(e){f&&f.removeListener(e)}function c(e){s.matches=e.matches,s.media=e.media}function u(){f&&f.removeListener(c)}var s=this;if(i&&!n){var f=i.call(window,e);this.matches=f.matches,this.media=f.media,f.addListener(c)}else this.matches=a(e,t),this.media=e;this.addListener=r,this.removeListener=o,this.dispose=u}function o(e,t,n){return new r(e,t,n)}var a=n(8).match,i="undefined"!=typeof window?window.matchMedia:null;e.exports=o},function(e,t,n){"use strict";function r(e,t){return o(e).some(function(e){var n=e.inverse,r="all"===e.type||t.type===e.type;if(r&&n||!r&&!n)return!1;var o=e.expressions.every(function(e){var n=e.feature,r=e.modifier,o=e.value,u=t[n];if(!u)return!1;switch(n){case"orientation":case"scan":return u.toLowerCase()===o.toLowerCase();case"width":case"height":case"device-width":case"device-height":o=c(o),u=c(u);break;case"resolution":o=i(o),u=i(u);break;case"aspect-ratio":case"device-aspect-ratio":case"device-pixel-ratio":o=a(o),u=a(u);break;case"grid":case"color":case"color-index":case"monochrome":o=parseInt(o,10)||1,u=parseInt(u,10)||0}switch(r){case"min":return u>=o;case"max":return u<=o;default:return u===o}});return o&&!n||!o&&n})}function o(e){return e.split(",").map(function(e){e=e.trim();var t=e.match(u),n=t[1],r=t[2],o=t[3]||"",a={};return a.inverse=!!n&&"not"===n.toLowerCase(),a.type=r?r.toLowerCase():"all",o=o.match(/\([^\)]+\)/g)||[],a.expressions=o.map(function(e){var t=e.match(s),n=t[1].toLowerCase().match(f);return{modifier:n[1],feature:n[2],value:t[2]}}),a})}function a(e){var t,n=Number(e);return n||(t=e.match(/^(\d+)\s*\/\s*(\d+)$/),n=t[1]/t[2]),n}function i(e){var t=parseFloat(e);switch(String(e).match(p)[1]){case"dpcm":return t/2.54;case"dppx":return 96*t;default:return t}}function c(e){var t=parseFloat(e);switch(String(e).match(l)[1]){case"em":case"rem":return 16*t;case"cm":return 96*t/2.54;case"mm":return 96*t/2.54/10;case"in":return 96*t;case"pt":return 72*t;case"pc":return 72*t/12;default:return t}}t.match=r,t.parse=o;var u=/(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i,s=/\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/,f=/^(?:(min|max)-)?(.+)/,l=/(em|rem|px|cm|mm|in|pt|pc)?$/,p=/(dpi|dpcm|dppx)?$/},function(e,t,n){"use strict";function r(e,t){var n=Object(a.a)(e);return"number"==typeof t&&(t="".concat(t,"px")),!0===t?e:!1===t?c(e):"(".concat(n,": ").concat(t,")")}function o(e){return e.join(" and ")}var a=n(1),i=n(2),c=function(e){return"not ".concat(e)};t.a=function(e){var t=[];return Object.keys(i.a.all).forEach(function(n){var o=e[n];null!=o&&t.push(r(n,o))}),o(t)}}])});
 //# sourceMappingURL=react-responsive.min.js.map

package.json

 {
   "name": "react-responsive",
   "description": "Media queries in react for responsive design",
-  "version": "6.1.2",
+  "version": "7.0.0",
   "homepage": "http://github.com/contra/react-responsive",
@@ -35,3 +35,3 @@ "repository": {
   "peerDependencies": {
-    "react": "^16.3.0"
+    "react": "^16.8.0"
   },
@@ -57,4 +57,4 @@ "devDependencies": {
     "mocha": "^6.0.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "should": "^13.2.1",
@@ -61,0 +61,0 @@ "sinon": "^7.0.0",

README.md

@@ -130,18 +130,19 @@ # react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Support us][gittip-image]][gittip-url]
 
-### Server rendering
+### Forcing device properties with `values` prop
 
-Server rendering can be done by passing static values through the `values` property.
+At times you may need to render components with different values than what gets automatically detected. This is especially useful in a Node environment where these settings can't be detected (SSR) or for testing.
 
-The values property can contain `orientation`, `scan`, `aspectRatio`, `deviceAspectRatio`,
+#### Possible Values
+
+`orientation`, `scan`, `aspectRatio`, `deviceAspectRatio`,
 `height`, `deviceHeight`, `width`, `deviceWidth`, `color`, `colorIndex`, `monochrome`,
- `resolution` and `type` to be matched against the media query.
+`resolution` and `type`
 
+##### Possible Types
+
 `type` can be one of: `all`, `grid`, `aural`, `braille`, `handheld`, `print`, `projection`,
-`screen`, `tty`, `tv` or `embossed`.
+`screen`, `tty`, `tv` or `embossed`
 
-Note: The `values` property always takes precedence, even on the client where a `window` object exists and matchMedia can be used.
+Note: The `values` property always applies, even when values could be detected (where window.matchMedia exists).
 
-If you are using [redux](http://redux.js.org/) you can automatically pass `width` / `deviceWidth` values to your components with [react-responsive-redux](https://github.com/modosc/react-responsive-redux).
-
-
 ```jsx
@@ -178,2 +179,55 @@ import MediaQuery from 'react-responsive';
 
+#### Supplying through Context
+
+You can also pass `values` to all components in the tree through a React [Context](https://reactjs.org/docs/context.html).
+This should ease up server-side-rendering and testing in a Node environment, e.g:
+
+##### Server Side Rendering
+
+```javascript
+import Responsive, { Context as ResponsiveContext } from 'react-responsive';
+import { renderToString } from "react-dom/server";
+import App from './App';
+
+...
+  // Context is just a regular React Context component, it accepts a `value` prop to be passed to consuming components
+  const mobileApp = renderToString(
+    <ResponsiveContext.Provider value={{ deviceWidth: 500 }}>
+      <App />
+    </ResponsiveContext.Provider>
+  );
+...
+```
+
+##### Testing
+
+```javascript
+import Responsive, { Context as ResponsiveContext } from 'react-responsive';
+import { render } from '@testing-library/react';
+import ProductsListing from './ProductsListing';
+
+describe('ProductsListing', () => {
+  test('matches the snapshot', () => {
+    const { container: mobile } = render(
+      <ResponsiveContext.Provider value={{ deviceWidth: 300 }}>
+        <ProductsListing />
+      </ResponsiveContext>  
+    )
+    expect(mobile).toMatchSnapshot();
+
+    const { container: desktop } = render(
+      <ResponsiveContext.Provider value={{ deviceWidth: 1000 }}>
+        <ProductsListing />
+      </ResponsiveContext>  
+    )
+    expect(desktop).toMatchSnapshot();
+  })
+})
+```
+
+Note that if any underlying component already has a `values` prop passed in it will take precedence over the one from context.
+
+If this doesn't fit your needs and you are using [redux](http://redux.js.org/) you might want to take a look
+at [react-responsive-redux](https://github.com/modosc/react-responsive-redux) which was made to solve a similar problem.
+
 ### Common use cases
@@ -180,0 +234,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

322808

increased by2.44%

Lines of code

929

increased by2.43%

Number of lines in readme file

297

increased by22.22%

No dependency changes