react-responsive - npm Package Compare versions

Comparing version 8.2.0 to 9.0.0-beta.1

CHANGELOG.md

 ## Change Log
 
+### v9.0.0
+
+- Convert project to typescript
+- Remove UMD build from project
+- Remove samples from project
+- Add docs webpage
+
+### v8.2.0
+
+- Repo maintenance - update dev dependencies and linter. Source maps updated.
+
 ### v8.1.0
@@ -4,0 +15,0 @@

dist/react-responsive.js

@@ -33,45 +33,14 @@ !function(root, factory) {
         }, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 7);
-    }([ function(module, __webpack_exports__, __webpack_require__) {
+    }([ function(module, exports, __webpack_require__) {
         "use strict";
-        function _slicedToArray(arr, i) {
-            return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-        }
-        function _nonIterableRest() {
-            throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-        }
-        function _unsupportedIterableToArray(o, minLen) {
-            if (o) {
-                if ("string" == typeof o) return _arrayLikeToArray(o, minLen);
-                var n = Object.prototype.toString.call(o).slice(8, -1);
-                return "Object" === n && o.constructor && (n = o.constructor.name), "Map" === n || "Set" === n ? Array.from(o) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? _arrayLikeToArray(o, minLen) : void 0;
-            }
-        }
-        function _arrayLikeToArray(arr, len) {
-            (null == len || len > arr.length) && (len = arr.length);
-            for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-            return arr2;
-        }
-        function _iterableToArrayLimit(arr, i) {
-            if ("undefined" != typeof Symbol && Symbol.iterator in Object(arr)) {
-                var _arr = [], _n = !0, _d = !1, _e = void 0;
-                try {
-                    for (var _s, _i = arr[Symbol.iterator](); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), 
-                    !i || _arr.length !== i); _n = !0) ;
-                } catch (err) {
-                    _d = !0, _e = err;
-                } finally {
-                    try {
-                        _n || null == _i.return || _i.return();
-                    } finally {
-                        if (_d) throw _e;
-                    }
-                }
-                return _arr;
-            }
-        }
-        function _arrayWithHoles(arr) {
-            if (Array.isArray(arr)) return arr;
-        }
-        var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(1), __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__), __WEBPACK_IMPORTED_MODULE_1_matchmediaquery__ = __webpack_require__(8), __WEBPACK_IMPORTED_MODULE_1_matchmediaquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_matchmediaquery__), __WEBPACK_IMPORTED_MODULE_2_hyphenate_style_name__ = __webpack_require__(2), __WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects__ = __webpack_require__(10), __WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects__), __WEBPACK_IMPORTED_MODULE_4__toQuery__ = __webpack_require__(3), __WEBPACK_IMPORTED_MODULE_5__Context__ = __webpack_require__(6), makeQuery = function(settings) {
-            return settings.query || Object(__WEBPACK_IMPORTED_MODULE_4__toQuery__.a)(settings);
+        var __importDefault = this && this.__importDefault || function(mod) {
+            return mod && mod.__esModule ? mod : {
+                default: mod
+            };
+        };
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        });
+        var react_1 = __importDefault(__webpack_require__(1)), matchmediaquery_1 = __importDefault(__webpack_require__(8)), hyphenate_style_name_1 = __importDefault(__webpack_require__(2)), shallow_equal_1 = __webpack_require__(10), toQuery_1 = __importDefault(__webpack_require__(3)), Context_1 = __importDefault(__webpack_require__(6)), makeQuery = function(settings) {
+            return settings.query || toQuery_1.default(settings);
         }, hyphenateKeys = function(obj) {
@@ -81,17 +50,16 @@ if (!obj) return null;
             return 0 === keys.length ? null : keys.reduce(function(result, key) {
-                return result[Object(__WEBPACK_IMPORTED_MODULE_2_hyphenate_style_name__.a)(key)] = obj[key], 
-                result;
+                return result[hyphenate_style_name_1.default(key)] = obj[key], result;
             }, {});
         }, useIsUpdate = function() {
-            var ref = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useRef(!1);
-            return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() {
+            var ref = react_1.default.useRef(!1);
+            return react_1.default.useEffect(function() {
                 ref.current = !0;
             }, []), ref.current;
         }, useDevice = function(deviceFromProps) {
-            var deviceFromContext = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useContext(__WEBPACK_IMPORTED_MODULE_5__Context__.a), getDevice = function() {
-                return hyphenateKeys(deviceFromProps) || hyphenateKeys(deviceFromContext);
-            }, _React$useState = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(getDevice), _React$useState2 = _slicedToArray(_React$useState, 2), device = _React$useState2[0], setDevice = _React$useState2[1];
-            return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() {
+            var deviceFromContext = react_1.default.useContext(Context_1.default), getDevice = function() {
+                return hyphenateKeys(deviceFromProps) || hyphenateKeys(deviceFromContext) || {};
+            }, _a = react_1.default.useState(getDevice), device = _a[0], setDevice = _a[1];
+            return react_1.default.useEffect(function() {
                 var newDevice = getDevice();
-                __WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects___default()(device, newDevice) || setDevice(newDevice);
+                shallow_equal_1.shallowEqualObjects(device, newDevice) || setDevice(newDevice);
             }, [ deviceFromProps, deviceFromContext ]), device;
@@ -101,4 +69,4 @@ }, useQuery = function(settings) {
                 return makeQuery(settings);
-            }, _React$useState3 = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(getQuery), _React$useState4 = _slicedToArray(_React$useState3, 2), query = _React$useState4[0], setQuery = _React$useState4[1];
-            return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() {
+            }, _a = react_1.default.useState(getQuery), query = _a[0], setQuery = _a[1];
+            return react_1.default.useEffect(function() {
                 var newQuery = getQuery();
@@ -109,12 +77,10 @@ query !== newQuery && setQuery(newQuery);
             var getMatchMedia = function() {
-                return __WEBPACK_IMPORTED_MODULE_1_matchmediaquery___default()(query, device || {}, !!device);
-            }, _React$useState5 = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(getMatchMedia), _React$useState6 = _slicedToArray(_React$useState5, 2), mq = _React$useState6[0], setMq = _React$useState6[1], isUpdate = useIsUpdate();
-            return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() {
-                return isUpdate && setMq(getMatchMedia()), function() {
-                    mq.dispose();
-                };
+                return matchmediaquery_1.default(query);
+            }, _a = react_1.default.useState(getMatchMedia), mq = _a[0], setMq = _a[1], isUpdate = useIsUpdate();
+            return react_1.default.useEffect(function() {
+                isUpdate && setMq(getMatchMedia());
             }, [ query, device ]), mq;
         }, useMatches = function(mediaQuery) {
-            var _React$useState7 = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useState(mediaQuery.matches), _React$useState8 = _slicedToArray(_React$useState7, 2), matches = _React$useState8[0], setMatches = _React$useState8[1];
-            return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() {
+            var _a = react_1.default.useState(mediaQuery.matches), matches = _a[0], setMatches = _a[1];
+            return react_1.default.useEffect(function() {
                 var updateMatches = function() {
@@ -131,7 +97,7 @@ setMatches(mediaQuery.matches);
             var mq = useMatchMedia(query, deviceSettings), matches = useMatches(mq), isUpdate = useIsUpdate();
-            return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() {
+            return react_1.default.useEffect(function() {
                 isUpdate && onChange && onChange(matches);
             }, [ matches ]), matches;
         };
-        __webpack_exports__.a = useMediaQuery;
+        exports.default = useMediaQuery;
     }, function(module, exports) {
@@ -149,11 +115,22 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
         }
+        Object.defineProperty(__webpack_exports__, "__esModule", {
+            value: !0
+        });
         var uppercasePattern = /[A-Z]/g, msPattern = /^ms-/, cache = {};
-        __webpack_exports__.a = hyphenateStyleName;
-    }, function(module, __webpack_exports__, __webpack_require__) {
+        __webpack_exports__.default = hyphenateStyleName;
+    }, function(module, exports, __webpack_require__) {
         "use strict";
-        var __WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__ = __webpack_require__(2), __WEBPACK_IMPORTED_MODULE_1__mediaQuery__ = __webpack_require__(11), negate = function(cond) {
-            return "not ".concat(cond);
+        var __importDefault = this && this.__importDefault || function(mod) {
+            return mod && mod.__esModule ? mod : {
+                default: mod
+            };
+        };
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        });
+        var hyphenate_style_name_1 = __importDefault(__webpack_require__(2)), mediaQuery_1 = __importDefault(__webpack_require__(11)), negate = function(cond) {
+            return "not " + cond;
         }, keyVal = function(k, v) {
-            var realKey = Object(__WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__.a)(k);
-            return "number" == typeof v && (v = "".concat(v, "px")), !0 === v ? realKey : !1 === v ? negate(realKey) : "(".concat(realKey, ": ").concat(v, ")");
+            var realKey = hyphenate_style_name_1.default(k);
+            return "number" == typeof v && (v += "px"), !0 === v ? realKey : !1 === v ? negate(realKey) : "(" + realKey + ": " + v + ")";
         }, join = function(conds) {
@@ -163,3 +140,3 @@ return conds.join(" and ");
             var rules = [];
-            return Object.keys(__WEBPACK_IMPORTED_MODULE_1__mediaQuery__.a.all).forEach(function(k) {
+            return Object.keys(mediaQuery_1.default.all).forEach(function(k) {
                 var v = obj[k];
@@ -169,3 +146,3 @@ null != v && rules.push(keyVal(k, v));
         };
-        __webpack_exports__.a = toQuery;
+        exports.default = toQuery;
     }, function(module, exports, __webpack_require__) {
@@ -177,23 +154,34 @@ "use strict";
         module.exports = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
-    }, function(module, __webpack_exports__, __webpack_require__) {
+    }, function(module, exports, __webpack_require__) {
         "use strict";
-        var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(1), __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__), Context = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext();
-        __webpack_exports__.a = Context;
-    }, function(module, __webpack_exports__, __webpack_require__) {
-        "use strict";
-        Object.defineProperty(__webpack_exports__, "__esModule", {
+        var __importDefault = this && this.__importDefault || function(mod) {
+            return mod && mod.__esModule ? mod : {
+                default: mod
+            };
+        };
+        Object.defineProperty(exports, "__esModule", {
             value: !0
         });
-        var __WEBPACK_IMPORTED_MODULE_0__useMediaQuery__ = __webpack_require__(0), __WEBPACK_IMPORTED_MODULE_1__Component__ = __webpack_require__(17), __WEBPACK_IMPORTED_MODULE_2__toQuery__ = __webpack_require__(3), __WEBPACK_IMPORTED_MODULE_3__Context__ = __webpack_require__(6);
-        __webpack_require__.d(__webpack_exports__, "default", function() {
-            return __WEBPACK_IMPORTED_MODULE_1__Component__.a;
-        }), __webpack_require__.d(__webpack_exports__, "useMediaQuery", function() {
-            return __WEBPACK_IMPORTED_MODULE_0__useMediaQuery__.a;
-        }), __webpack_require__.d(__webpack_exports__, "toQuery", function() {
-            return __WEBPACK_IMPORTED_MODULE_2__toQuery__.a;
-        }), __webpack_require__.d(__webpack_exports__, "Context", function() {
-            return __WEBPACK_IMPORTED_MODULE_3__Context__.a;
-        });
+        var react_1 = __importDefault(__webpack_require__(1)), Context = react_1.default.createContext({});
+        exports.default = Context;
     }, function(module, exports, __webpack_require__) {
         "use strict";
+        var __importDefault = this && this.__importDefault || function(mod) {
+            return mod && mod.__esModule ? mod : {
+                default: mod
+            };
+        };
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        }), exports.Context = exports.toQuery = exports.useMediaQuery = exports.default = void 0;
+        var useMediaQuery_1 = __importDefault(__webpack_require__(0));
+        exports.useMediaQuery = useMediaQuery_1.default;
+        var Component_1 = __importDefault(__webpack_require__(17));
+        exports.default = Component_1.default;
+        var toQuery_1 = __importDefault(__webpack_require__(3));
+        exports.toQuery = toQuery_1.default;
+        var Context_1 = __importDefault(__webpack_require__(6));
+        exports.Context = Context_1.default;
+    }, function(module, exports, __webpack_require__) {
+        "use strict";
         function Mql(query, values, forceStatic) {
@@ -336,3 +324,3 @@ function addListener(listener) {
         var RE_MEDIA_QUERY = /(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i, RE_MQ_EXPRESSION = /\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/, RE_MQ_FEATURE = /^(?:(min|max)-)?(.+)/, RE_LENGTH_UNIT = /(em|rem|px|cm|mm|in|pt|pc)?$/, RE_RESOLUTION_UNIT = /(dpi|dpcm|dppx)?$/;
-    }, function(module, exports, __webpack_require__) {
+    }, function(module, __webpack_exports__, __webpack_require__) {
         "use strict";
@@ -350,39 +338,57 @@ function shallowEqualObjects(objA, objB) {
         }
-        module.exports = shallowEqualObjects;
-    }, function(module, __webpack_exports__, __webpack_require__) {
+        function shallowEqualArrays(arrA, arrB) {
+            if (arrA === arrB) return !0;
+            if (!arrA || !arrB) return !1;
+            var len = arrA.length;
+            if (arrB.length !== len) return !1;
+            for (var i = 0; i < len; i++) if (arrA[i] !== arrB[i]) return !1;
+            return !0;
+        }
+        Object.defineProperty(__webpack_exports__, "__esModule", {
+            value: !0
+        }), __webpack_require__.d(__webpack_exports__, "shallowEqualArrays", function() {
+            return shallowEqualArrays;
+        }), __webpack_require__.d(__webpack_exports__, "shallowEqualObjects", function() {
+            return shallowEqualObjects;
+        });
+    }, function(module, exports, __webpack_require__) {
         "use strict";
-        function ownKeys(object, enumerableOnly) {
-            var keys = Object.keys(object);
-            if (Object.getOwnPropertySymbols) {
-                var symbols = Object.getOwnPropertySymbols(object);
-                enumerableOnly && (symbols = symbols.filter(function(sym) {
-                    return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-                })), keys.push.apply(keys, symbols);
-            }
-            return keys;
-        }
-        function _objectSpread(target) {
-            for (var i = 1; i < arguments.length; i++) {
-                var source = null != arguments[i] ? arguments[i] : {};
-                i % 2 ? ownKeys(Object(source), !0).forEach(function(key) {
-                    _defineProperty(target, key, source[key]);
-                }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-                    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-                });
-            }
-            return target;
-        }
-        function _defineProperty(obj, key, value) {
-            return key in obj ? Object.defineProperty(obj, key, {
-                value: value,
-                enumerable: !0,
-                configurable: !0,
-                writable: !0
-            }) : obj[key] = value, obj;
-        }
-        var __WEBPACK_IMPORTED_MODULE_0_prop_types__ = __webpack_require__(12), __WEBPACK_IMPORTED_MODULE_0_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_prop_types__), stringOrNumber = __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOfType([ __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string, __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number ]), matchers = {
-            orientation: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOf([ "portrait", "landscape" ]),
-            scan: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOf([ "progressive", "interlace" ]),
-            aspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
-            deviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
+        var __assign = this && this.__assign || function() {
+            return __assign = Object.assign || function(t) {
+                for (var s, i = 1, n = arguments.length; i < n; i++) {
+                    s = arguments[i];
+                    for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && (t[p] = s[p]);
+                }
+                return t;
+            }, __assign.apply(this, arguments);
+        }, __rest = this && this.__rest || function(s, e) {
+            var t = {};
+            for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+            if (null != s && "function" == typeof Object.getOwnPropertySymbols) for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+            return t;
+        }, __importDefault = this && this.__importDefault || function(mod) {
+            return mod && mod.__esModule ? mod : {
+                default: mod
+            };
+        };
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        });
+        var prop_types_1 = __importDefault(__webpack_require__(12)), stringOrNumber = prop_types_1.default.oneOfType([ prop_types_1.default.string, prop_types_1.default.number ]), types = {
+            all: prop_types_1.default.bool,
+            grid: prop_types_1.default.bool,
+            aural: prop_types_1.default.bool,
+            braille: prop_types_1.default.bool,
+            handheld: prop_types_1.default.bool,
+            print: prop_types_1.default.bool,
+            projection: prop_types_1.default.bool,
+            screen: prop_types_1.default.bool,
+            tty: prop_types_1.default.bool,
+            tv: prop_types_1.default.bool,
+            embossed: prop_types_1.default.bool
+        }, matchers = {
+            orientation: prop_types_1.default.oneOf([ "portrait", "landscape" ]),
+            scan: prop_types_1.default.oneOf([ "progressive", "interlace" ]),
+            aspectRatio: prop_types_1.default.string,
+            deviceAspectRatio: prop_types_1.default.string,
             height: stringOrNumber,
@@ -392,11 +398,12 @@ deviceHeight: stringOrNumber,
             deviceWidth: stringOrNumber,
-            color: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
-            colorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
-            monochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
-            resolution: stringOrNumber
-        }, features = _objectSpread({
-            minAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
-            maxAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
-            minDeviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
-            maxDeviceAspectRatio: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.string,
+            color: prop_types_1.default.bool,
+            colorIndex: prop_types_1.default.bool,
+            monochrome: prop_types_1.default.bool,
+            resolution: stringOrNumber,
+            type: Object.keys(types)
+        }, featureMatchers = __rest(matchers, [ "type" ]), features = __assign({
+            minAspectRatio: prop_types_1.default.string,
+            maxAspectRatio: prop_types_1.default.string,
+            minDeviceAspectRatio: prop_types_1.default.string,
+            maxDeviceAspectRatio: prop_types_1.default.string,
             minHeight: stringOrNumber,
@@ -410,24 +417,12 @@ maxHeight: stringOrNumber,
             maxDeviceWidth: stringOrNumber,
-            minColor: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,
-            maxColor: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,
-            minColorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,
-            maxColorIndex: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,
-            minMonochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,
-            maxMonochrome: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.number,
+            minColor: prop_types_1.default.number,
+            maxColor: prop_types_1.default.number,
+            minColorIndex: prop_types_1.default.number,
+            maxColorIndex: prop_types_1.default.number,
+            minMonochrome: prop_types_1.default.number,
+            maxMonochrome: prop_types_1.default.number,
             minResolution: stringOrNumber,
             maxResolution: stringOrNumber
-        }, matchers), types = {
-            all: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
-            grid: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
-            aural: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
-            braille: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
-            handheld: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
-            print: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
-            projection: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
-            screen: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
-            tty: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
-            tv: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool,
-            embossed: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.bool
-        }, all = _objectSpread(_objectSpread({}, types), features);
-        matchers.type = Object.keys(types), __webpack_exports__.a = {
+        }, featureMatchers), all = __assign(__assign({}, types), features);
+        exports.default = {
             all: all,
@@ -863,27 +858,24 @@ types: types,
         }, module.exports = checkPropTypes;
-    }, function(module, __webpack_exports__, __webpack_require__) {
+    }, function(module, exports, __webpack_require__) {
         "use strict";
-        function _objectWithoutProperties(source, excluded) {
-            if (null == source) return {};
-            var key, i, target = _objectWithoutPropertiesLoose(source, excluded);
-            if (Object.getOwnPropertySymbols) {
-                var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-                for (i = 0; i < sourceSymbolKeys.length; i++) key = sourceSymbolKeys[i], excluded.indexOf(key) >= 0 || Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
-            }
-            return target;
-        }
-        function _objectWithoutPropertiesLoose(source, excluded) {
-            if (null == source) return {};
-            var key, i, target = {}, sourceKeys = Object.keys(source);
-            for (i = 0; i < sourceKeys.length; i++) key = sourceKeys[i], excluded.indexOf(key) >= 0 || (target[key] = source[key]);
-            return target;
-        }
-        function MediaQuery(_ref) {
-            var children = _ref.children, device = _ref.device, onChange = _ref.onChange, settings = _objectWithoutProperties(_ref, [ "children", "device", "onChange" ]), matches = Object(__WEBPACK_IMPORTED_MODULE_0__useMediaQuery__.a)(settings, device, onChange);
+        var __rest = this && this.__rest || function(s, e) {
+            var t = {};
+            for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
+            if (null != s && "function" == typeof Object.getOwnPropertySymbols) for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]) && (t[p[i]] = s[p[i]]);
+            return t;
+        }, __importDefault = this && this.__importDefault || function(mod) {
+            return mod && mod.__esModule ? mod : {
+                default: mod
+            };
+        };
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        });
+        var useMediaQuery_1 = __importDefault(__webpack_require__(0)), MediaQuery = function(_a) {
+            var children = _a.children, device = _a.device, onChange = _a.onChange, settings = __rest(_a, [ "children", "device", "onChange" ]), matches = useMediaQuery_1.default(settings, device, onChange);
             return "function" == typeof children ? children(matches) : matches ? children : null;
-        }
-        __webpack_exports__.a = MediaQuery;
-        var __WEBPACK_IMPORTED_MODULE_0__useMediaQuery__ = __webpack_require__(0);
+        };
+        exports.default = MediaQuery;
     } ]);
 });
 //# sourceMappingURL=react-responsive.js.map

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(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=5)}([function(e,t,r){"use strict";function n(e,t){return u(e)||c(e,t)||a(e,t)||o()}function o(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function a(e,t){if(e){if("string"==typeof e)return i(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?i(e,t):void 0}}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function c(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var r=[],n=!0,o=!1,a=void 0;try{for(var i,c=e[Symbol.iterator]();!(n=(i=c.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{n||null==c.return||c.return()}finally{if(o)throw a}}return r}}function u(e){if(Array.isArray(e))return e}var s=r(1),f=r.n(s),l=r(6),p=r.n(l),m=r(2),d=r(8),h=r.n(d),v=r(3),b=r(4),y=function(e){return e.query||Object(v.a)(e)},O=function(e){if(!e)return null;var t=Object.keys(e);return 0===t.length?null:t.reduce(function(t,r){return t[Object(m.a)(r)]=e[r],t},{})},g=function(){var e=f.a.useRef(!1);return f.a.useEffect(function(){e.current=!0},[]),e.current},x=function(e){var t=f.a.useContext(b.a),r=function(){return O(e)||O(t)},o=f.a.useState(r),a=n(o,2),i=a[0],c=a[1];return f.a.useEffect(function(){var e=r();h()(i,e)||c(e)},[e,t]),i},j=function(e){var t=function(){return y(e)},r=f.a.useState(t),o=n(r,2),a=o[0],i=o[1];return f.a.useEffect(function(){var e=t();a!==e&&i(e)},[e]),a},w=function(e,t){var r=function(){return p()(e,t||{},!!t)},o=f.a.useState(r),a=n(o,2),i=a[0],c=a[1],u=g();return f.a.useEffect(function(){return u&&c(r()),function(){i.dispose()}},[e,t]),i},P=function(e){var t=f.a.useState(e.matches),r=n(t,2),o=r[0],a=r[1];return f.a.useEffect(function(){var t=function(){a(e.matches)};return e.addListener(t),t(),function(){e.removeListener(t)}},[e]),o},C=function(e,t,r){var n=x(t),o=j(e);if(!o)throw new Error("Invalid or missing MediaQuery!");var a=w(o,n),i=P(a),c=g();return f.a.useEffect(function(){c&&r&&r(i)},[i]),i};t.a=C},function(t,r){t.exports=e},function(e,t,r){"use strict";function n(e){return"-"+e.toLowerCase()}function o(e){if(c.hasOwnProperty(e))return c[e];var t=e.replace(a,n);return c[e]=i.test(t)?"-"+t:t}var a=/[A-Z]/g,i=/^ms-/,c={};t.a=o},function(e,t,r){"use strict";var n=r(2),o=r(9),a=function(e){return"not ".concat(e)},i=function(e,t){var r=Object(n.a)(e);return"number"==typeof t&&(t="".concat(t,"px")),!0===t?r:!1===t?a(r):"(".concat(r,": ").concat(t,")")},c=function(e){return e.join(" and ")},u=function(e){var t=[];return Object.keys(o.a.all).forEach(function(r){var n=e[r];null!=n&&t.push(i(r,n))}),c(t)};t.a=u},function(e,t,r){"use strict";var n=r(1),o=r.n(n),a=o.a.createContext();t.a=a},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=r(0),o=r(13),a=r(3),i=r(4);r.d(t,"default",function(){return o.a}),r.d(t,"useMediaQuery",function(){return n.a}),r.d(t,"toQuery",function(){return a.a}),r.d(t,"Context",function(){return i.a})},function(e,t,r){"use strict";function n(e,t,r){function n(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&&!r){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=n,this.removeListener=o,this.dispose=u}function o(e,t,r){return new n(e,t,r)}var a=r(7).match,i="undefined"!=typeof window?window.matchMedia:null;e.exports=o},function(e,t,r){"use strict";function n(e,t){return o(e).some(function(e){var r=e.inverse,n="all"===e.type||t.type===e.type;if(n&&r||!n&&!r)return!1;var o=e.expressions.every(function(e){var r=e.feature,n=e.modifier,o=e.value,u=t[r];if(!u)return!1;switch(r){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(n){case"min":return u>=o;case"max":return u<=o;default:return u===o}});return o&&!r||!o&&r})}function o(e){return e.split(",").map(function(e){e=e.trim();var t=e.match(u),r=t[1],n=t[2],o=t[3]||"",a={};return a.inverse=!!r&&"not"===r.toLowerCase(),a.type=n?n.toLowerCase():"all",o=o.match(/\([^\)]+\)/g)||[],a.expressions=o.map(function(e){var t=e.match(s),r=t[1].toLowerCase().match(f);return{modifier:r[1],feature:r[2],value:t[2]}}),a})}function a(e){var t,r=Number(e);return r||(t=e.match(/^(\d+)\s*\/\s*(\d+)$/),r=t[1]/t[2]),r}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=n,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,r){"use strict";function n(e,t){if(e===t)return!0;if(!e||!t)return!1;var r=Object.keys(e),n=Object.keys(t),o=r.length;if(n.length!==o)return!1;for(var a=0;a<o;a++){var i=r[a];if(e[i]!==t[i]||!Object.prototype.hasOwnProperty.call(t,i))return!1}return!0}e.exports=n},function(e,t,r){"use strict";function n(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,n)}return r}function o(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach(function(t){a(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var i=r(10),c=r.n(i),u=c.a.oneOfType([c.a.string,c.a.number]),s={orientation:c.a.oneOf(["portrait","landscape"]),scan:c.a.oneOf(["progressive","interlace"]),aspectRatio:c.a.string,deviceAspectRatio:c.a.string,height:u,deviceHeight:u,width:u,deviceWidth:u,color:c.a.bool,colorIndex:c.a.bool,monochrome:c.a.bool,resolution:u},f=o({minAspectRatio:c.a.string,maxAspectRatio:c.a.string,minDeviceAspectRatio:c.a.string,maxDeviceAspectRatio:c.a.string,minHeight:u,maxHeight:u,minDeviceHeight:u,maxDeviceHeight:u,minWidth:u,maxWidth:u,minDeviceWidth:u,maxDeviceWidth:u,minColor:c.a.number,maxColor:c.a.number,minColorIndex:c.a.number,maxColorIndex:c.a.number,minMonochrome:c.a.number,maxMonochrome:c.a.number,minResolution:u,maxResolution:u},s),l={all:c.a.bool,grid:c.a.bool,aural:c.a.bool,braille:c.a.bool,handheld:c.a.bool,print:c.a.bool,projection:c.a.bool,screen:c.a.bool,tty:c.a.bool,tv:c.a.bool,embossed:c.a.bool},p=o(o({},l),f);s.type=Object.keys(l),t.a={all:p,types:l,matchers:s,features:f}},function(e,t,r){e.exports=r(11)()},function(e,t,r){"use strict";function n(){}function o(){}var a=r(12);o.resetWarningCache=n,e.exports=function(){function e(e,t,r,n,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 r={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:n};return r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";function n(e,t){if(null==e)return{};var r,n,a=o(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function o(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}function a(e){var t=e.children,r=e.device,o=e.onChange,a=n(e,["children","device","onChange"]),c=Object(i.a)(a,r,o);return"function"==typeof t?t(c):c?t:null}t.a=a;var i=r(0)}])});
+!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(n){if(r[n])return r[n].exports;var u=r[n]={i:n,l:!1,exports:{}};return e[n].call(u.exports,u,u.exports,t),u.l=!0,u.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=5)}([function(e,t,r){"use strict";var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var u=n(r(1)),o=n(r(6)),a=n(r(2)),i=r(8),c=n(r(3)),s=n(r(4)),f=function(e){return e.query||c.default(e)},l=function(e){if(!e)return null;var t=Object.keys(e);return 0===t.length?null:t.reduce(function(t,r){return t[a.default(r)]=e[r],t},{})},d=function(){var e=u.default.useRef(!1);return u.default.useEffect(function(){e.current=!0},[]),e.current},p=function(e){var t=u.default.useContext(s.default),r=function(){return l(e)||l(t)||{}},n=u.default.useState(r),o=n[0],a=n[1];return u.default.useEffect(function(){var e=r();i.shallowEqualObjects(o,e)||a(e)},[e,t]),o},m=function(e){var t=function(){return f(e)},r=u.default.useState(t),n=r[0],o=r[1];return u.default.useEffect(function(){var e=t();n!==e&&o(e)},[e]),n},h=function(e,t){var r=function(){return o.default(e)},n=u.default.useState(r),a=n[0],i=n[1],c=d();return u.default.useEffect(function(){c&&i(r())},[e,t]),a},v=function(e){var t=u.default.useState(e.matches),r=t[0],n=t[1];return u.default.useEffect(function(){var t=function(){n(e.matches)};return e.addListener(t),t(),function(){e.removeListener(t)}},[e]),r},y=function(e,t,r){var n=p(t),o=m(e);if(!o)throw new Error("Invalid or missing MediaQuery!");var a=h(o,n),i=v(a),c=d();return u.default.useEffect(function(){c&&r&&r(i)},[i]),i};t.default=y},function(t,r){t.exports=e},function(e,t,r){"use strict";function n(e){return"-"+e.toLowerCase()}function u(e){if(i.hasOwnProperty(e))return i[e];var t=e.replace(o,n);return i[e]=a.test(t)?"-"+t:t}Object.defineProperty(t,"__esModule",{value:!0});var o=/[A-Z]/g,a=/^ms-/,i={};t.default=u},function(e,t,r){"use strict";var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var u=n(r(2)),o=n(r(9)),a=function(e){return"not "+e},i=function(e,t){var r=u.default(e);return"number"==typeof t&&(t+="px"),!0===t?r:!1===t?a(r):"("+r+": "+t+")"},c=function(e){return e.join(" and ")},s=function(e){var t=[];return Object.keys(o.default.all).forEach(function(r){var n=e[r];null!=n&&t.push(i(r,n))}),c(t)};t.default=s},function(e,t,r){"use strict";var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var u=n(r(1)),o=u.default.createContext({});t.default=o},function(e,t,r){"use strict";var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.Context=t.toQuery=t.useMediaQuery=t.default=void 0;var u=n(r(0));t.useMediaQuery=u.default;var o=n(r(13));t.default=o.default;var a=n(r(3));t.toQuery=a.default;var i=n(r(4));t.Context=i.default},function(e,t,r){"use strict";function n(e,t,r){function n(e){f&&f.addListener(e)}function u(e){f&&f.removeListener(e)}function i(e){s.matches=e.matches,s.media=e.media}function c(){f&&f.removeListener(i)}var s=this;if(a&&!r){var f=a.call(window,e);this.matches=f.matches,this.media=f.media,f.addListener(i)}else this.matches=o(e,t),this.media=e;this.addListener=n,this.removeListener=u,this.dispose=c}function u(e,t,r){return new n(e,t,r)}var o=r(7).match,a="undefined"!=typeof window?window.matchMedia:null;e.exports=u},function(e,t,r){"use strict";function n(e,t){return u(e).some(function(e){var r=e.inverse,n="all"===e.type||t.type===e.type;if(n&&r||!n&&!r)return!1;var u=e.expressions.every(function(e){var r=e.feature,n=e.modifier,u=e.value,c=t[r];if(!c)return!1;switch(r){case"orientation":case"scan":return c.toLowerCase()===u.toLowerCase();case"width":case"height":case"device-width":case"device-height":u=i(u),c=i(c);break;case"resolution":u=a(u),c=a(c);break;case"aspect-ratio":case"device-aspect-ratio":case"device-pixel-ratio":u=o(u),c=o(c);break;case"grid":case"color":case"color-index":case"monochrome":u=parseInt(u,10)||1,c=parseInt(c,10)||0}switch(n){case"min":return c>=u;case"max":return c<=u;default:return c===u}});return u&&!r||!u&&r})}function u(e){return e.split(",").map(function(e){e=e.trim();var t=e.match(c),r=t[1],n=t[2],u=t[3]||"",o={};return o.inverse=!!r&&"not"===r.toLowerCase(),o.type=n?n.toLowerCase():"all",u=u.match(/\([^\)]+\)/g)||[],o.expressions=u.map(function(e){var t=e.match(s),r=t[1].toLowerCase().match(f);return{modifier:r[1],feature:r[2],value:t[2]}}),o})}function o(e){var t,r=Number(e);return r||(t=e.match(/^(\d+)\s*\/\s*(\d+)$/),r=t[1]/t[2]),r}function a(e){var t=parseFloat(e);switch(String(e).match(d)[1]){case"dpcm":return t/2.54;case"dppx":return 96*t;default:return t}}function i(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=n,t.parse=u;var c=/(?:(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)?$/,d=/(dpi|dpcm|dppx)?$/},function(e,t,r){"use strict";function n(e,t){if(e===t)return!0;if(!e||!t)return!1;var r=Object.keys(e),n=Object.keys(t),u=r.length;if(n.length!==u)return!1;for(var o=0;o<u;o++){var a=r[o];if(e[a]!==t[a]||!Object.prototype.hasOwnProperty.call(t,a))return!1}return!0}function u(e,t){if(e===t)return!0;if(!e||!t)return!1;var r=e.length;if(t.length!==r)return!1;for(var n=0;n<r;n++)if(e[n]!==t[n])return!1;return!0}Object.defineProperty(t,"__esModule",{value:!0}),r.d(t,"shallowEqualArrays",function(){return u}),r.d(t,"shallowEqualObjects",function(){return n})},function(e,t,r){"use strict";var n=this&&this.__assign||function(){return n=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++){t=arguments[r];for(var u in t)Object.prototype.hasOwnProperty.call(t,u)&&(e[u]=t[u])}return e},n.apply(this,arguments)},u=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var u=0,n=Object.getOwnPropertySymbols(e);u<n.length;u++)t.indexOf(n[u])<0&&Object.prototype.propertyIsEnumerable.call(e,n[u])&&(r[n[u]]=e[n[u]]);return r},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var a=o(r(10)),i=a.default.oneOfType([a.default.string,a.default.number]),c={all:a.default.bool,grid:a.default.bool,aural:a.default.bool,braille:a.default.bool,handheld:a.default.bool,print:a.default.bool,projection:a.default.bool,screen:a.default.bool,tty:a.default.bool,tv:a.default.bool,embossed:a.default.bool},s={orientation:a.default.oneOf(["portrait","landscape"]),scan:a.default.oneOf(["progressive","interlace"]),aspectRatio:a.default.string,deviceAspectRatio:a.default.string,height:i,deviceHeight:i,width:i,deviceWidth:i,color:a.default.bool,colorIndex:a.default.bool,monochrome:a.default.bool,resolution:i,type:Object.keys(c)},f=u(s,["type"]),l=n({minAspectRatio:a.default.string,maxAspectRatio:a.default.string,minDeviceAspectRatio:a.default.string,maxDeviceAspectRatio:a.default.string,minHeight:i,maxHeight:i,minDeviceHeight:i,maxDeviceHeight:i,minWidth:i,maxWidth:i,minDeviceWidth:i,maxDeviceWidth:i,minColor:a.default.number,maxColor:a.default.number,minColorIndex:a.default.number,maxColorIndex:a.default.number,minMonochrome:a.default.number,maxMonochrome:a.default.number,minResolution:i,maxResolution:i},f),d=n(n({},c),l);t.default={all:d,types:c,matchers:s,features:l}},function(e,t,r){e.exports=r(11)()},function(e,t,r){"use strict";function n(){}function u(){}var o=r(12);u.resetWarningCache=n,e.exports=function(){function e(e,t,r,n,u,a){if(a!==o){var i=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 i.name="Invariant Violation",i}}function t(){return e}e.isRequired=e;var r={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:u,resetWarningCache:n};return r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";var n=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var u=0,n=Object.getOwnPropertySymbols(e);u<n.length;u++)t.indexOf(n[u])<0&&Object.prototype.propertyIsEnumerable.call(e,n[u])&&(r[n[u]]=e[n[u]]);return r},u=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var o=u(r(0)),a=function(e){var t=e.children,r=e.device,u=e.onChange,a=n(e,["children","device","onChange"]),i=o.default(a,r,u);return"function"==typeof t?t(i):i?t:null};t.default=a}])});
 //# sourceMappingURL=react-responsive.min.js.map

package.json

 {
   "name": "react-responsive",
   "description": "Media queries in react for responsive design",
-  "version": "8.2.0",
+  "version": "9.0.0-beta.1",
   "homepage": "http://github.com/contra/react-responsive",
@@ -10,3 +10,3 @@ "repository": {
   },
-  "author": "Contra <[e-mail]> (http://contra.io)",
+  "author": "Contra <[e-mail]> (https://contra.io)",
   "license": "MIT",
@@ -35,3 +35,3 @@ "main": "./dist/react-responsive.js",
     "prop-types": "^15.6.1",
-    "shallow-equal": "^1.1.0"
+    "shallow-equal": "^1.2.1"
   },
@@ -42,17 +42,18 @@ "peerDependencies": {
   "devDependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.0.0",
     "@stae/linters": "^1.0.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.0",
-    "babel-loader": "^8.0.0",
-    "babel-plugin-add-module-exports": "^1.0.0",
+    "@types/chai": "^4.2.15",
+    "@types/hyphenate-style-name": "^1.0.0",
+    "@types/jsdom": "^16.2.6",
+    "@types/match-media-mock": "^0.1.5",
+    "@types/matchmediaquery": "^0.3.0",
+    "@types/mocha": "^8.2.1",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
+    "@types/sinon": "^9.0.10",
+    "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/parser": "^4.15.2",
     "chai": "^4.1.2",
     "cross-env": "^7.0.0",
     "eslint": "^7.0.0",
+    "gh-pages": "^3.1.0",
     "jsdom": "^16.0.0",
@@ -65,2 +66,6 @@ "match-media-mock": "^0.1.1",
     "sinon": "^9.0.0",
+    "ts-loader": "^3.5.0",
+    "ts-node": "^9.1.1",
+    "typedoc": "0.20.30",
+    "typescript": "^4.1.5",
     "webpack": "^3.0.0",
@@ -71,3 +76,3 @@ "webpack-dev-server": "^2.11.5"
     "preversion": "npm run clean && npm run build",
-    "start": "webpack-dev-server --config webpack.config.samples.js  --content-base samples/sandbox/src --host 0.0.0.0 --hot --inline --port 3333",
+    "postpublish": "npm run tag && npm run docs",
     "build:umd": "cross-env BUILD_MODE=umd webpack",
@@ -78,19 +83,10 @@ "build:umd-min": "cross-env BUILD_MODE=umd-min webpack",
     "clean": "rimraf dist",
-    "lint": "eslint ./*.js src test --fix",
-    "test": "cross-env NODE_PATH=$NODE_PATH:$PWD/src mocha -R spec --require @babel/register --require ./test/setup.js test/*_test.js"
+    "tag": "git tag -a \"v$npm_package_version\" -m \"tag version $npm_package_version\" && git push origin master --tags",
+    "lint": "eslint --ext=ts,tsx src test --fix",
+    "test": "cross-env NODE_PATH=$NODE_PATkH:$PWD/src ts-node ./node_modules/.bin/mocha -R spec --require ./test/setup.js test/*_test.ts",
+    "docs": "typedoc src/index.ts --theme minimal && gh-pages -d docs"
   },
-  "babel": {
-    "presets": [
-      "@babel/preset-env",
-      "@babel/preset-react"
-    ],
-    "plugins": [
-      "add-module-exports",
-      "@babel/plugin-proposal-class-properties",
-      "@babel/plugin-proposal-object-rest-spread"
-    ]
-  },
   "engines": {
-    "node": ">= 0.10"
+    "node": ">=0.10"
   }
 }

README.md

@@ -43,25 +43,17 @@ # react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]
   const isDesktopOrLaptop = useMediaQuery({
-    query: '(min-device-width: 1224px)'
+    query: '(min-width: 1224px)'
   })
-  const isBigScreen = useMediaQuery({ query: '(min-device-width: 1824px)' })
+  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
   const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
-  const isTabletOrMobileDevice = useMediaQuery({
-    query: '(max-device-width: 1224px)'
-  })
   const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
   const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })
 
-  return (
-    <div>
-      <h1>Device Test!</h1>
-      {isDesktopOrLaptop && <>
-        <p>You are a desktop or laptop</p>
-        {isBigScreen && <p>You also have a huge screen</p>}
-        {isTabletOrMobile && <p>You are sized like a tablet or mobile phone though</p>}
-      </>}
-      {isTabletOrMobileDevice && <p>You are a tablet or mobile phone</p>}
-      <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
-      {isRetina && <p>You are retina</p>}
-    </div>
-  )
+  return <div>
+    <h1>Device Test!</h1>
+    {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
+    {isBigScreen && <p>You  have a huge screen</p>}
+    {isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
+    <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
+    {isRetina && <p>You are retina</p>}
+  </div>
 }
@@ -78,9 +70,9 @@ ```
     <h1>Device Test!</h1>
-    <MediaQuery minDeviceWidth={1224} device={{ deviceWidth: 1600 }}>
+    <MediaQuery minWidth={1224}>
       <p>You are a desktop or laptop</p>
-      <MediaQuery minDeviceWidth={1824}>
+      <MediaQuery minWidth={1824}>
         <p>You also have a huge screen</p>
       </MediaQuery>
     </MediaQuery>
-    <MediaQuery minResolution='2dppx'>
+    <MediaQuery minResolution="2dppx">
       {/* You can also use a function (render prop) as a child */}
@@ -114,6 +106,5 @@ {(matches) =>
 const Example = () => {
-  const isDesktopOrLaptop = useMediaQuery({ minDeviceWidth: 1224 })
-  const isBigScreen = useMediaQuery({ minDeviceWidth: 1824 })
+  const isDesktopOrLaptop = useMediaQuery({ minWidth: 1224 })
+  const isBigScreen = useMediaQuery({ minWidth: 1824 })
   const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 })
-  const isTabletOrMobileDevice = useMediaQuery({ maxDeviceWidth: 1224 })
   const isPortrait = useMediaQuery({ orientation: 'portrait' })
@@ -233,3 +224,3 @@ const isRetina = useMediaQuery({ minResolution: '2dppx' })
   const isDesktopOrLaptop = useMediaQuery(
-    { minDeviceWidth: 1224 }, undefined,  handleMediaQueryChange
+    { minWidth: 1224 }, undefined,  handleMediaQueryChange
   );
@@ -256,3 +247,3 @@
   return (
-    <MediaQuery minDeviceWidth={1224} onChange={handleMediaQueryChange}>
+    <MediaQuery minWidth={1224} onChange={handleMediaQueryChange}>
       ...
@@ -300,2 +291,27 @@ </MediaQuery>
 
+And if you want a combo (the DRY way):
+
+```js
+import { useMediaQuery } from "react-responsive"
+
+const useDesktopMediaQuery = () =>
+  useMediaQuery({ query: "(min-width: 1280px)" })
+
+const useTabletAndBelowMediaQuery = () =>
+  useMediaQuery({ query: "(max-width: 1279px)" })
+
+const Desktop = ({ children }) => {
+  const isDesktop = useDesktopMediaQuery()
+
+  return isDesktop ? children : null
+}
+
+const TabletAndBelow = ({ children }) => {
+  const isTabletAndBelow = useTabletAndBelowMediaQuery()
+
+  return isTabletAndBelow ? children : null
+}
+```
+
+
 ## Browser Support
@@ -302,0 +318,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

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

168190

increased by2.67%

Number of package files

23

increased by64.29%

Lines of code

1376

increased by22.64%

Number of lines in readme file

352

increased by4.76%

Worsened metrics

Dev dependency count

29

increased by20.83%

Number of medium maintenance alerts

1

increased byInfinity%

Number of low quality alerts

2

increased by100%

Dependency changes

• Updatedshallow-equal@^1.2.1