react-responsive - npm Package Compare versions

Comparing version 5.0.0 to 6.0.0

CHANGELOG.md

 ## Change Log
 
+### v6.0.0
+
+- Require React v16 or higher
+- Update and simplify all lifecycle functions
+- Remove all support for wrapper elements
+  - Previously, when either `component` or non-mediaquery props were provided, we would render a wrapper element. This behavior no longer exists.
+  - The rendering logic is now a basic ternary - `matches ? props.children : null`
+- Thanks to @whatknight for doing the work here.
+
 ### v5.0.0
@@ -4,0 +13,0 @@ - New changelog system, all manual now since the automated system was overcomplicated and missed things.

dist/react-responsive.js

@@ -48,22 +48,28 @@ !function(root, factory) {
         module.exports = hyphenateStyleName;
-    }, function(module, exports, __webpack_require__) {
+    }, function(module, __webpack_exports__, __webpack_require__) {
         "use strict";
-        Object.defineProperty(exports, "__esModule", {
-            value: !0
-        });
-        var _extends = Object.assign || function(target) {
+        function _objectSpread(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]);
+                var source = null != arguments[i] ? arguments[i] : {}, ownKeys = Object.keys(source);
+                "function" == typeof Object.getOwnPropertySymbols && (ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                    return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+                }))), ownKeys.forEach(function(key) {
+                    _defineProperty(target, key, source[key]);
+                });
             }
             return target;
-        }, _propTypes = __webpack_require__(0), _propTypes2 = function(obj) {
-            return obj && obj.__esModule ? obj : {
-                default: obj
-            };
-        }(_propTypes), stringOrNumber = _propTypes2.default.oneOfType([ _propTypes2.default.string, _propTypes2.default.number ]), matchers = {
-            orientation: _propTypes2.default.oneOf([ "portrait", "landscape" ]),
-            scan: _propTypes2.default.oneOf([ "progressive", "interlace" ]),
-            aspectRatio: _propTypes2.default.string,
-            deviceAspectRatio: _propTypes2.default.string,
+        }
+        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__(0), __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,
             height: stringOrNumber,
@@ -73,11 +79,11 @@ deviceHeight: stringOrNumber,
             deviceWidth: stringOrNumber,
-            color: _propTypes2.default.bool,
-            colorIndex: _propTypes2.default.bool,
-            monochrome: _propTypes2.default.bool,
+            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 = _extends({
-            minAspectRatio: _propTypes2.default.string,
-            maxAspectRatio: _propTypes2.default.string,
-            minDeviceAspectRatio: _propTypes2.default.string,
-            maxDeviceAspectRatio: _propTypes2.default.string,
+        }, 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,
             minHeight: stringOrNumber,
@@ -91,24 +97,24 @@ maxHeight: stringOrNumber,
             maxDeviceWidth: stringOrNumber,
-            minColor: _propTypes2.default.number,
-            maxColor: _propTypes2.default.number,
-            minColorIndex: _propTypes2.default.number,
-            maxColorIndex: _propTypes2.default.number,
-            minMonochrome: _propTypes2.default.number,
-            maxMonochrome: _propTypes2.default.number,
+            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,
             minResolution: stringOrNumber,
             maxResolution: stringOrNumber
         }, matchers), types = {
-            all: _propTypes2.default.bool,
-            grid: _propTypes2.default.bool,
-            aural: _propTypes2.default.bool,
-            braille: _propTypes2.default.bool,
-            handheld: _propTypes2.default.bool,
-            print: _propTypes2.default.bool,
-            projection: _propTypes2.default.bool,
-            screen: _propTypes2.default.bool,
-            tty: _propTypes2.default.bool,
-            tv: _propTypes2.default.bool,
-            embossed: _propTypes2.default.bool
-        }, all = _extends({}, types, features);
-        matchers.type = Object.keys(types), exports.default = {
+            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({}, types, features);
+        matchers.type = Object.keys(types), __webpack_exports__.a = {
             all: all,
@@ -118,9 +124,11 @@ types: types,
             features: features
-        }, module.exports = exports.default;
-    }, function(module, exports, __webpack_require__) {
+        };
+    }, function(module, __webpack_exports__, __webpack_require__) {
         "use strict";
-        function _interopRequireDefault(obj) {
-            return obj && obj.__esModule ? obj : {
-                default: obj
-            };
+        function _typeof(obj) {
+            return (_typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj) {
+                return typeof obj;
+            } : function(obj) {
+                return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+            })(obj);
         }
@@ -130,97 +138,117 @@ function _classCallCheck(instance, Constructor) {
         }
+        function _defineProperties(target, props) {
+            for (var i = 0; i < props.length; i++) {
+                var descriptor = props[i];
+                descriptor.enumerable = descriptor.enumerable || !1, descriptor.configurable = !0, 
+                "value" in descriptor && (descriptor.writable = !0), Object.defineProperty(target, descriptor.key, descriptor);
+            }
+        }
+        function _createClass(Constructor, protoProps, staticProps) {
+            return protoProps && _defineProperties(Constructor.prototype, protoProps), staticProps && _defineProperties(Constructor, staticProps), 
+            Constructor;
+        }
         function _possibleConstructorReturn(self, call) {
-            if (!self) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-            return !call || "object" != typeof call && "function" != typeof call ? self : call;
+            return !call || "object" !== _typeof(call) && "function" != typeof call ? _assertThisInitialized(self) : call;
         }
+        function _getPrototypeOf(o) {
+            return (_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function(o) {
+                return o.__proto__ || Object.getPrototypeOf(o);
+            })(o);
+        }
         function _inherits(subClass, superClass) {
-            if ("function" != typeof superClass && null !== superClass) throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+            if ("function" != typeof superClass && null !== superClass) throw new TypeError("Super expression must either be null or a function");
             subClass.prototype = Object.create(superClass && superClass.prototype, {
                 constructor: {
                     value: subClass,
-                    enumerable: !1,
                     writable: !0,
                     configurable: !0
                 }
-            }), superClass && (Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass);
+            }), superClass && _setPrototypeOf(subClass, superClass);
         }
-        function omit(object, keys) {
-            var newObject = _extends({}, object);
-            return keys.forEach(function(key) {
-                return delete newObject[key];
-            }), newObject;
+        function _setPrototypeOf(o, p) {
+            return (_setPrototypeOf = Object.setPrototypeOf || function(o, p) {
+                return o.__proto__ = p, o;
+            })(o, p);
         }
-        Object.defineProperty(exports, "__esModule", {
-            value: !0
-        }), exports.toQuery = exports.default = void 0;
-        var _createClass = function() {
-            function defineProperties(target, props) {
-                for (var i = 0; i < props.length; i++) {
-                    var descriptor = props[i];
-                    descriptor.enumerable = descriptor.enumerable || !1, descriptor.configurable = !0, 
-                    "value" in descriptor && (descriptor.writable = !0), Object.defineProperty(target, descriptor.key, descriptor);
-                }
-            }
-            return function(Constructor, protoProps, staticProps) {
-                return protoProps && defineProperties(Constructor.prototype, protoProps), staticProps && defineProperties(Constructor, staticProps), 
-                Constructor;
-            };
-        }(), _extends = Object.assign || function(target) {
+        function _assertThisInitialized(self) {
+            if (void 0 === self) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+            return self;
+        }
+        function _objectSpread(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]);
+                var source = null != arguments[i] ? arguments[i] : {}, ownKeys = Object.keys(source);
+                "function" == typeof Object.getOwnPropertySymbols && (ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                    return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+                }))), ownKeys.forEach(function(key) {
+                    _defineProperty(target, key, source[key]);
+                });
             }
             return target;
-        }, _react = __webpack_require__(5), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(0), _propTypes2 = _interopRequireDefault(_propTypes), _matchmediaquery = __webpack_require__(9), _matchmediaquery2 = _interopRequireDefault(_matchmediaquery), _hyphenateStyleName = __webpack_require__(2), _hyphenateStyleName2 = _interopRequireDefault(_hyphenateStyleName), _mediaQuery = __webpack_require__(3), _mediaQuery2 = _interopRequireDefault(_mediaQuery), _toQuery = __webpack_require__(11), _toQuery2 = _interopRequireDefault(_toQuery), defaultTypes = {
-            component: _propTypes2.default.node,
-            query: _propTypes2.default.string,
-            values: _propTypes2.default.shape(_mediaQuery2.default.matchers),
-            children: _propTypes2.default.oneOfType([ _propTypes2.default.node, _propTypes2.default.func ]),
-            onChange: _propTypes2.default.func,
-            onBeforeChange: _propTypes2.default.func
-        }, mediaKeys = Object.keys(_mediaQuery2.default.all), excludedQueryKeys = Object.keys(defaultTypes), excludedPropKeys = excludedQueryKeys.concat(mediaKeys), MediaQuery = function(_React$Component) {
+        }
+        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;
+        }
+        Object.defineProperty(__webpack_exports__, "__esModule", {
+            value: !0
+        }), __webpack_require__.d(__webpack_exports__, "default", function() {
+            return MediaQuery;
+        });
+        var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(5), __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__(9), __WEBPACK_IMPORTED_MODULE_2_matchmediaquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_matchmediaquery__), __WEBPACK_IMPORTED_MODULE_3_hyphenate_style_name__ = __webpack_require__(2), __WEBPACK_IMPORTED_MODULE_3_hyphenate_style_name___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_hyphenate_style_name__), __WEBPACK_IMPORTED_MODULE_4__mediaQuery__ = __webpack_require__(3), __WEBPACK_IMPORTED_MODULE_5__toQuery__ = __webpack_require__(11);
+        __webpack_require__.d(__webpack_exports__, "toQuery", function() {
+            return __WEBPACK_IMPORTED_MODULE_5__toQuery__.a;
+        });
+        var defaultTypes = {
+            component: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.node,
+            query: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string,
+            values: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.shape(__WEBPACK_IMPORTED_MODULE_4__mediaQuery__.a.matchers),
+            children: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.oneOfType([ __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.node, __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.func ]),
+            onChange: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.func
+        }, excludedQueryKeys = Object.keys(defaultTypes), omit = function(object, keys) {
+            var newObject = _objectSpread({}, object);
+            return keys.forEach(function(key) {
+                return delete newObject[key];
+            }), newObject;
+        }, getValues = function(_ref) {
+            var _ref$values = _ref.values, values = void 0 === _ref$values ? {} : _ref$values;
+            return Object.keys(values).reduce(function(result, key) {
+                return result[__WEBPACK_IMPORTED_MODULE_3_hyphenate_style_name___default()(key)] = values[key], 
+                result;
+            }, {});
+        }, getQuery = function(props) {
+            return props.query || Object(__WEBPACK_IMPORTED_MODULE_5__toQuery__.a)(omit(props, excludedQueryKeys));
+        }, createMatchMedia = function(props, query) {
+            var values = getValues(props), forceStatic = 0 === values.length;
+            return __WEBPACK_IMPORTED_MODULE_2_matchmediaquery___default()(query, values, forceStatic);
+        }, MediaQuery = function(_React$Component) {
             function MediaQuery() {
-                var _ref, _temp, _this, _ret;
+                var _getPrototypeOf2, _this;
                 _classCallCheck(this, MediaQuery);
-                for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-                return _temp = _this = _possibleConstructorReturn(this, (_ref = MediaQuery.__proto__ || Object.getPrototypeOf(MediaQuery)).call.apply(_ref, [ this ].concat(args))), 
-                _this.state = {
-                    matches: !1
-                }, _this.updateMatches = function() {
-                    _this._mql.matches !== _this.state.matches && _this.setState({
-                        matches: _this._mql.matches
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
+                return _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(MediaQuery)).call.apply(_getPrototypeOf2, [ this ].concat(args))), 
+                _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+                    matches: !1,
+                    mq: null,
+                    query: ""
+                }), _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cleanupMediaQuery", function(mq) {
+                    mq && (mq.removeListener(_this.updateMatches), mq.dispose());
+                }), _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "updateMatches", function() {
+                    _this._unmounted || _this.state.mq.matches !== _this.state.matches && _this.setState({
+                        matches: _this.state.mq.matches
                     });
-                }, _this.removeMql = function() {
-                    _this._mql && (_this._mql.removeListener(_this.updateMatches), _this._mql.dispose());
-                }, _ret = _temp, _possibleConstructorReturn(_this, _ret);
+                }), _this;
             }
             return _inherits(MediaQuery, _React$Component), _createClass(MediaQuery, [ {
-                key: "componentWillMount",
+                key: "componentDidMount",
                 value: function() {
-                    this.updateQuery(this.props);
+                    this.state.mq.addListener(this.updateMatches), this.updateMatches();
                 }
             }, {
-                key: "componentWillReceiveProps",
-                value: function(nextProps) {
-                    this.updateQuery(nextProps);
-                }
-            }, {
-                key: "updateQuery",
-                value: function(props) {
-                    var values = void 0, forceStatic = !1;
-                    if (props.query ? this.query = props.query : this.query = (0, _toQuery2.default)(omit(props, excludedQueryKeys)), 
-                    !this.query) throw new Error("Invalid or missing MediaQuery!");
-                    props.values && (values = Object.keys(props.values).reduce(function(result, key) {
-                        return result[(0, _hyphenateStyleName2.default)(key)] = props.values[key], result;
-                    }, {}), 0 !== Object.keys(values).length && (forceStatic = !0)), this.removeMql(), 
-                    this._mql = (0, _matchmediaquery2.default)(this.query, values, forceStatic), this._mql.addListener(this.updateMatches), 
-                    this.updateMatches();
-                }
-            }, {
-                key: "componentWillUpdate",
-                value: function(_, nextState) {
-                    this.props.onBeforeChange && this.state.matches !== nextState.matches && this.props.onBeforeChange(this.state.matches);
-                }
-            }, {
                 key: "componentDidUpdate",
-                value: function(_, prevState) {
+                value: function(prevProps, prevState) {
+                    this.state.mq !== prevState.mq && (this.cleanupMediaQuery(prevState.mq), this.state.mq.addListener(this.updateMatches)), 
                     this.props.onChange && prevState.matches !== this.state.matches && this.props.onChange(this.state.matches);
@@ -231,3 +259,3 @@ }
                 value: function() {
-                    this.removeMql();
+                    this._unmounted = !0, this.cleanupMediaQuery(this.state.mq);
                 }
@@ -237,12 +265,22 @@ }, {
                 value: function() {
-                    if ("function" == typeof this.props.children) return this.props.children(this.state.matches);
-                    if (!1 === this.state.matches) return null;
-                    var props = omit(this.props, excludedPropKeys), hasMergeProps = Object.keys(props).length > 0, childrenCount = _react2.default.Children.count(this.props.children);
-                    return this.props.component || null == this.props.children || hasMergeProps && childrenCount > 1 ? _react2.default.createElement(this.props.component || "div", props, this.props.children) : hasMergeProps ? _react2.default.cloneElement(this.props.children, props) : childrenCount ? this.props.children : null;
+                    return "function" == typeof this.props.children ? this.props.children(this.state.matches) : this.state.matches ? this.props.children : null;
                 }
+            } ], [ {
+                key: "getDerivedStateFromProps",
+                value: function(props, state) {
+                    var query = getQuery(props);
+                    if (!query) throw new Error("Invalid or missing MediaQuery!");
+                    if (query === state.query) return null;
+                    var mq = createMatchMedia(props, query);
+                    return {
+                        matches: mq.matches,
+                        mq: mq,
+                        query: query
+                    };
+                }
             } ]), MediaQuery;
-        }(_react2.default.Component);
-        MediaQuery.displayName = "MediaQuery", MediaQuery.defaultProps = {
+        }(__WEBPACK_IMPORTED_MODULE_0_react___default.a.Component);
+        _defineProperty(MediaQuery, "displayName", "MediaQuery"), _defineProperty(MediaQuery, "defaultProps", {
             values: {}
-        }, exports.default = MediaQuery, exports.toQuery = _toQuery2.default;
+        });
     }, function(module, exports) {
@@ -701,12 +739,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_5__;
         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";
-        function _interopRequireDefault(obj) {
-            return obj && obj.__esModule ? obj : {
-                default: obj
-            };
-        }
         function keyVal(k, v) {
-            var realKey = (0, _hyphenateStyleName2.default)(k);
-            return "number" == typeof v && (v += "px"), !0 === v ? k : !1 === v ? negate(k) : "(" + realKey + ": " + v + ")";
+            var realKey = __WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name___default()(k);
+            return "number" == typeof v && (v = "".concat(v, "px")), !0 === v ? k : !1 === v ? negate(k) : "(".concat(realKey, ": ").concat(v, ")");
         }
@@ -716,7 +749,8 @@ function join(conds) {
         }
-        Object.defineProperty(exports, "__esModule", {
-            value: !0
-        }), exports.default = function(obj) {
+        var __WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__ = __webpack_require__(2), __WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__), __WEBPACK_IMPORTED_MODULE_1__mediaQuery__ = __webpack_require__(3), negate = function(cond) {
+            return "not ".concat(cond);
+        };
+        __webpack_exports__.a = function(obj) {
             var rules = [];
-            return Object.keys(_mediaQuery2.default.all).forEach(function(k) {
+            return Object.keys(__WEBPACK_IMPORTED_MODULE_1__mediaQuery__.a.all).forEach(function(k) {
                 var v = obj[k];
@@ -726,8 +760,4 @@ null != v && rules.push(keyVal(k, v));
         };
-        var _hyphenateStyleName = __webpack_require__(2), _hyphenateStyleName2 = _interopRequireDefault(_hyphenateStyleName), _mediaQuery = __webpack_require__(3), _mediaQuery2 = _interopRequireDefault(_mediaQuery), negate = function(cond) {
-            return "not " + cond;
-        };
-        module.exports = exports.default;
     } ]);
 });
 //# 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(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 in i?i[e]:i[e]=e.replace(o,"-$&").toLowerCase().replace(a,"-ms-")}var o=/[A-Z]/g,a=/^ms-/,i={};e.exports=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var 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},o=n(0),a=function(e){return e&&e.__esModule?e:{default:e}}(o),i=a.default.oneOfType([a.default.string,a.default.number]),u={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},s=r({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},u),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},l=r({},c,s);u.type=Object.keys(c),t.default={all:l,types:c,matchers:u,features:s},e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function u(e,t){var n=c({},e);return t.forEach(function(e){return delete n[e]}),n}Object.defineProperty(t,"__esModule",{value:!0}),t.toQuery=t.default=void 0;var s=function(){function e(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)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=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},l=n(4),f=r(l),p=n(0),d=r(p),h=n(7),m=r(h),y=n(1),v=r(y),b=n(2),g=r(b),x=n(9),O=r(x),_={component:d.default.node,query:d.default.string,values:d.default.shape(g.default.matchers),children:d.default.oneOfType([d.default.node,d.default.func]),onChange:d.default.func,onBeforeChange:d.default.func},w=Object.keys(g.default.all),j=Object.keys(_),k=j.concat(w),M=function(e){function t(){var e,n,r,i;o(this,t);for(var u=arguments.length,s=Array(u),c=0;c<u;c++)s[c]=arguments[c];return n=r=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),r.state={matches:!1},r.updateMatches=function(){r._mql.matches!==r.state.matches&&r.setState({matches:r._mql.matches})},r.removeMql=function(){r._mql&&(r._mql.removeListener(r.updateMatches),r._mql.dispose())},i=n,a(r,i)}return i(t,e),s(t,[{key:"componentWillMount",value:function(){this.updateQuery(this.props)}},{key:"componentWillReceiveProps",value:function(e){this.updateQuery(e)}},{key:"updateQuery",value:function(e){var t=void 0,n=!1;if(e.query?this.query=e.query:this.query=(0,O.default)(u(e,j)),!this.query)throw new Error("Invalid or missing MediaQuery!");e.values&&(t=Object.keys(e.values).reduce(function(t,n){return t[(0,v.default)(n)]=e.values[n],t},{}),0!==Object.keys(t).length&&(n=!0)),this.removeMql(),this._mql=(0,m.default)(this.query,t,n),this._mql.addListener(this.updateMatches),this.updateMatches()}},{key:"componentWillUpdate",value:function(e,t){this.props.onBeforeChange&&this.state.matches!==t.matches&&this.props.onBeforeChange(this.state.matches)}},{key:"componentDidUpdate",value:function(e,t){this.props.onChange&&t.matches!==this.state.matches&&this.props.onChange(this.state.matches)}},{key:"componentWillUnmount",value:function(){this.removeMql()}},{key:"render",value:function(){if("function"==typeof this.props.children)return this.props.children(this.state.matches);if(!1===this.state.matches)return null;var e=u(this.props,k),t=Object.keys(e).length>0,n=f.default.Children.count(this.props.children);return this.props.component||null==this.props.children||t&&n>1?f.default.createElement(this.props.component||"div",e,this.props.children):t?f.default.cloneElement(this.props.children,e):n?this.props.children:null}}]),t}(f.default.Component);M.displayName="MediaQuery",M.defaultProps={values:{}},t.default=M,t.toQuery=O.default},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(){}var o=n(6);e.exports=function(){function e(e,t,n,r,a,i){if(i!==o){var u=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 u.name="Invariant Violation",u}}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,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,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){l&&l.addListener(e)}function o(e){l&&l.removeListener(e)}function u(e){c.matches=e.matches,c.media=e.media}function s(){l&&l.removeListener(u)}var c=this;if(i&&!n){var l=i.call(window,e);this.matches=l.matches,this.media=l.media,l.addListener(u)}else this.matches=a(e,t),this.media=e;this.addListener=r,this.removeListener=o,this.dispose=s}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,s=t[n];if(!s)return!1;switch(n){case"orientation":case"scan":return s.toLowerCase()===o.toLowerCase();case"width":case"height":case"device-width":case"device-height":o=u(o),s=u(s);break;case"resolution":o=i(o),s=i(s);break;case"aspect-ratio":case"device-aspect-ratio":case"device-pixel-ratio":o=a(o),s=a(s);break;case"grid":case"color":case"color-index":case"monochrome":o=parseInt(o,10)||1,s=parseInt(s,10)||0}switch(r){case"min":return s>=o;case"max":return s<=o;default:return s===o}});return o&&!n||!o&&n})}function o(e){return e.split(",").map(function(e){e=e.trim();var t=e.match(s),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(c),n=t[1].toLowerCase().match(l);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 u(e){var t=parseFloat(e);switch(String(e).match(f)[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 s=/(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i,c=/\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/,l=/^(?:(min|max)-)?(.+)/,f=/(em|rem|px|cm|mm|in|pt|pc)?$/,p=/(dpi|dpcm|dppx)?$/},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n=(0,u.default)(e);return"number"==typeof t&&(t+="px"),!0===t?e:!1===t?l(e):"("+n+": "+t+")"}function a(e){return e.join(" and ")}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=[];return Object.keys(c.default.all).forEach(function(n){var r=e[n];null!=r&&t.push(o(n,r))}),a(t)};var i=n(1),u=r(i),s=n(2),c=r(s),l=function(e){return"not "+e};e.exports=t.default}])});
+!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 in i?i[e]:i[e]=e.replace(o,"-$&").toLowerCase().replace(a,"-ms-")}var o=/[A-Z]/g,a=/^ms-/,i={};e.exports=r},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]),s={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},u=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},s),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},p=r({},f,u);s.type=Object.keys(f),t.a={all:p,types:f,matchers:s,features:u}},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?p(e):t}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function u(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&&f(e,t)}function f(e,t){return(f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function l(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 C});var h=n(4),d=n.n(h),y=n(0),b=n.n(y),v=n(7),g=n.n(v),O=n(1),w=n.n(O),x=n(2),j=n(9);n.d(t,"toQuery",function(){return j.a});var P={component:b.a.node,query:b.a.string,values:b.a.shape(x.a.matchers),children:b.a.oneOfType([b.a.node,b.a.func]),onChange:b.a.func},_=Object.keys(P),k=function(e,t){var n=l({},e);return t.forEach(function(e){return delete n[e]}),n},q=function(e){var t=e.values,n=void 0===t?{}:t;return Object.keys(n).reduce(function(e,t){return e[w()(t)]=n[t],e},{})},M=function(e){return e.query||Object(j.a)(k(e,_))},S=function(e,t){var n=q(e),r=0===n.length;return g()(t,n,r)},C=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=s(t)).call.apply(e,[this].concat(a))),m(p(p(n)),"state",{matches:!1,mq:null,query:""}),m(p(p(n)),"cleanupMediaQuery",function(e){e&&(e.removeListener(n.updateMatches),e.dispose())}),m(p(p(n)),"updateMatches",function(){n._unmounted||n.state.mq.matches!==n.state.matches&&n.setState({matches:n.state.mq.matches})}),n}return u(t,e),i(t,[{key:"componentDidMount",value:function(){this.state.mq.addListener(this.updateMatches),this.updateMatches()}},{key:"componentDidUpdate",value:function(e,t){this.state.mq!==t.mq&&(this.cleanupMediaQuery(t.mq),this.state.mq.addListener(this.updateMatches)),this.props.onChange&&t.matches!==this.state.matches&&this.props.onChange(this.state.matches)}},{key:"componentWillUnmount",value:function(){this._unmounted=!0,this.cleanupMediaQuery(this.state.mq)}},{key:"render",value:function(){return"function"==typeof this.props.children?this.props.children(this.state.matches):this.state.matches?this.props.children:null}}],[{key:"getDerivedStateFromProps",value:function(e,t){var n=M(e);if(!n)throw new Error("Invalid or missing MediaQuery!");if(n===t.query)return null;var r=S(e,n);return{matches:r.matches,mq:r,query:n}}}]),t}(d.a.Component);m(C,"displayName","MediaQuery"),m(C,"defaultProps",{values:{}})},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(){}var o=n(6);e.exports=function(){function e(e,t,n,r,a,i){if(i!==o){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,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,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){u.matches=e.matches,u.media=e.media}function s(){f&&f.removeListener(c)}var u=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=s}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,s=t[n];if(!s)return!1;switch(n){case"orientation":case"scan":return s.toLowerCase()===o.toLowerCase();case"width":case"height":case"device-width":case"device-height":o=c(o),s=c(s);break;case"resolution":o=i(o),s=i(s);break;case"aspect-ratio":case"device-aspect-ratio":case"device-pixel-ratio":o=a(o),s=a(s);break;case"grid":case"color":case"color-index":case"monochrome":o=parseInt(o,10)||1,s=parseInt(s,10)||0}switch(r){case"min":return s>=o;case"max":return s<=o;default:return s===o}});return o&&!n||!o&&n})}function o(e){return e.split(",").map(function(e){e=e.trim();var t=e.match(s),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(u),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(l)[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(p)[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 s=/(?:(only|not)?\s*([^\s\(\)]+)(?:\s*and)?\s*)?(.+)?/i,u=/\(\s*([^\s\:\)]+)\s*(?:\:\s*([^\s\)]+))?\s*\)/,f=/^(?:(min|max)-)?(.+)/,p=/(em|rem|px|cm|mm|in|pt|pc)?$/,l=/(dpi|dpcm|dppx)?$/},function(e,t,n){"use strict";function r(e,t){var n=i()(e);return"number"==typeof t&&(t="".concat(t,"px")),!0===t?e:!1===t?s(e):"(".concat(n,": ").concat(t,")")}function o(e){return e.join(" and ")}var a=n(1),i=n.n(a),c=n(2),s=function(e){return"not ".concat(e)};t.a=function(e){var t=[];return Object.keys(c.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": "5.0.0",
+  "version": "6.0.0",
   "homepage": "http://github.com/contra/react-responsive",
@@ -38,18 +38,19 @@ "repository": {
   "devDependencies": {
-    "babel-cli": "^6.18.0",
-    "babel-core": "^6.18.0",
-    "babel-eslint": "^8.2.2",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.16.0",
-    "babel-register": "^6.18.0",
+    "@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",
+    "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",
     "chai": "^4.1.2",
     "cross-env": "^5.1.3",
-    "eslint": "^4.18.2",
+    "eslint": "^5.0.0",
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-react": "^7.7.0",
-    "jsdom": "^11.6.2",
+    "jsdom": "^12.2.0",
     "mocha": "^5.0.0",
@@ -59,5 +60,5 @@ "react": "^16.2.0",
     "should": "^13.2.1",
-    "sinon": "^4.4.2",
-    "webpack": "^3.11.0",
-    "webpack-dev-server": "^2.11.2"
+    "sinon": "^6.3.5",
+    "webpack": "^3.0.0",
+    "webpack-dev-server": "^2.0.0"
   },
@@ -73,13 +74,13 @@ "scripts": {
     "lint": "eslint src test",
-    "test": "cross-env NODE_PATH=$NODE_PATH:$PWD/src mocha -R spec --compilers js:babel-register --require ./test/setup.js test/*_test.js"
+    "test": "cross-env NODE_PATH=$NODE_PATH:$PWD/src mocha -R spec --compilers js:@babel/register --require ./test/setup.js test/*_test.js"
   },
   "babel": {
     "presets": [
-      "env",
-      "react"
+      "@babel/preset-env",
+      "@babel/preset-react"
     ],
     "plugins": [
       "add-module-exports",
-      "transform-class-properties",
-      "transform-object-rest-spread"
+      "@babel/plugin-proposal-class-properties",
+      "@babel/plugin-proposal-object-rest-spread"
     ]
@@ -86,0 +87,0 @@ },

README.md

@@ -130,53 +130,5 @@ # react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Support us][gittip-image]][gittip-url]
 
-### Component Property
-
-You may specify an optional `component` property on the `MediaQuery` that indicates what component to wrap children with. Any additional props defined on the `MediaQuery` will be passed through to this "wrapper" component. If the `component` property is not defined and the `MediaQuery` has more than 1 child, a `div` will be used as the "wrapper" component by default. However, if the `component` prop is not defined and there is only 1 child, that child will be rendered alone without a component wrapping it.
-
-**Specifying Wrapper Component**
-
-```jsx
-<MediaQuery minDeviceWidth={700} component="ul">
-  <li>Item 1</li>
-  <li>Item 2</li>
-</MediaQuery>
-
-// renders the following when the media query condition is met
-
-<ul>
-  <li>Item 1</li>
-  <li>Item 2</li>
-</ul>
-```
-
-**Unwrapped Component**
-
-```jsx
-<MediaQuery minDeviceWidth={700}>
-  <div>Unwrapped component</div>
-</MediaQuery>
-
-// renders the following when the media query condition is met
-
-<div>Unwrapped component</div>
-```
-
-**Default div Wrapper Component**
-
-```jsx
-<MediaQuery minDeviceWidth={1200} className="some-class">
-  <div>Wrapped</div>
-  <div>Content</div>
-</MediaQuery>
-
-// renders the following when the media query condition is met
-
-<div className="some-class">
-  <div>Wrapped</div>
-  <div>Content</div>
-</div>
-```
-
 ### Server rendering
 
-Server rendering can be done by passing static values through the `values` property. 
+Server rendering can be done by passing static values through the `values` property.
 
@@ -192,3 +144,3 @@ The values property can contain `orientation`, `scan`, `aspectRatio`, `deviceAspectRatio`,
 
-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). 
+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).
 
@@ -195,0 +147,0 @@

No alert changes

Improved metrics

Total package byte prevSize

281352

increased by3.69%

Lines of code

780

increased by4.28%

Worsened metrics

Dev dependency count

24

increased by4.35%

Number of lines in readme file

243

decreased by-16.49%

No dependency changes