Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-responsive

Package Overview
Dependencies
Maintainers
2
Versions
70
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-responsive - npm Package Compare versions

Comparing version 7.0.0 to 8.0.0-beta.0

640

dist/react-responsive.js
!function(root, factory) {
"object" == typeof exports && "object" == typeof module ? module.exports = factory(require("react")) : "function" == typeof define && define.amd ? define([ "react" ], factory) : "object" == typeof exports ? exports.MediaQuery = factory(require("react")) : root.MediaQuery = factory(root.React);
}("undefined" != typeof self ? self : this, function(__WEBPACK_EXTERNAL_MODULE_6__) {
}("undefined" != typeof self ? self : this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
return function(modules) {

@@ -32,12 +32,90 @@ function __webpack_require__(moduleId) {

return Object.prototype.hasOwnProperty.call(object, property);
}, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 5);
}([ function(module, exports, __webpack_require__) {
var ReactIs = __webpack_require__(1);
module.exports = __webpack_require__(8)(ReactIs.isElement, !0);
}, function(module, exports, __webpack_require__) {
}, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 6);
}([ function(module, __webpack_exports__, __webpack_require__) {
"use strict";
module.exports = __webpack_require__(7);
}, function(module, exports, __webpack_require__) {
"use strict";
module.exports = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
function _iterableToArrayLimit(arr, i) {
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__(7), __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__(9), __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__(10), __WEBPACK_IMPORTED_MODULE_5__Context__ = __webpack_require__(5), makeQuery = function(settings) {
return settings.query || Object(__WEBPACK_IMPORTED_MODULE_4__toQuery__.a)(settings);
}, hyphenateKeys = function(obj) {
if (!obj) return null;
var keys = Object.keys(obj);
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;
}, {});
}, useIsUpdate = function() {
var ref = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useRef(!1);
return __WEBPACK_IMPORTED_MODULE_0_react___default.a.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 newDevice = getDevice();
__WEBPACK_IMPORTED_MODULE_3_shallow_equal_objects___default()(device, newDevice) || setDevice(newDevice);
}, [ deviceFromProps, deviceFromContext ]), device;
}, useQuery = function(settings) {
var getQuery = function() {
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() {
var newQuery = getQuery();
query !== newQuery && setQuery(newQuery);
}, [ settings ]), query;
}, useMatchMedia = function(query, device) {
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();
};
}, [ 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 updateMatches = function() {
setMatches(mediaQuery.matches);
};
return mediaQuery.addListener(updateMatches), updateMatches(), function() {
mediaQuery.removeListener(updateMatches);
};
}, [ mediaQuery ]), matches;
}, useMediaQuery = function(settings, device, onChange) {
var deviceSettings = useDevice(device), query = useQuery(settings);
if (!query) throw new Error("Invalid or missing MediaQuery!");
var mq = useMatchMedia(query, deviceSettings), matches = useMatches(mq), isUpdate = useIsUpdate();
return __WEBPACK_IMPORTED_MODULE_0_react___default.a.useEffect(function() {
isUpdate && onChange && onChange(matches);
}, [ matches ]), matches;
};
__webpack_exports__.a = useMediaQuery;
}, function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
}, function(module, __webpack_exports__, __webpack_require__) {

@@ -55,4 +133,197 @@ "use strict";

__webpack_exports__.a = hyphenateStyleName;
}, function(module, exports, __webpack_require__) {
"use strict";
module.exports = __webpack_require__(13);
}, function(module, exports, __webpack_require__) {
"use strict";
module.exports = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
}, function(module, __webpack_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", {
value: !0
});
var __WEBPACK_IMPORTED_MODULE_0__useMediaQuery__ = __webpack_require__(0), __WEBPACK_IMPORTED_MODULE_1__Component__ = __webpack_require__(17), __WEBPACK_IMPORTED_MODULE_2__Context__ = __webpack_require__(5);
__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__, "Context", function() {
return __WEBPACK_IMPORTED_MODULE_2__Context__.a;
});
}, function(module, exports, __webpack_require__) {
"use strict";
function Mql(query, values, forceStatic) {
function addListener(listener) {
mql && mql.addListener(listener);
}
function removeListener(listener) {
mql && mql.removeListener(listener);
}
function update(evt) {
self.matches = evt.matches, self.media = evt.media;
}
function dispose() {
mql && mql.removeListener(update);
}
var self = this;
if (dynamicMatch && !forceStatic) {
var mql = dynamicMatch.call(window, query);
this.matches = mql.matches, this.media = mql.media, mql.addListener(update);
} else this.matches = staticMatch(query, values), this.media = query;
this.addListener = addListener, this.removeListener = removeListener, this.dispose = dispose;
}
function matchMedia(query, values, forceStatic) {
return new Mql(query, values, forceStatic);
}
var staticMatch = __webpack_require__(8).match, dynamicMatch = "undefined" != typeof window ? window.matchMedia : null;
module.exports = matchMedia;
}, function(module, exports, __webpack_require__) {
"use strict";
function matchQuery(mediaQuery, values) {
return parseQuery(mediaQuery).some(function(query) {
var inverse = query.inverse, typeMatch = "all" === query.type || values.type === query.type;
if (typeMatch && inverse || !typeMatch && !inverse) return !1;
var expressionsMatch = query.expressions.every(function(expression) {
var feature = expression.feature, modifier = expression.modifier, expValue = expression.value, value = values[feature];
if (!value) return !1;
switch (feature) {
case "orientation":
case "scan":
return value.toLowerCase() === expValue.toLowerCase();
case "width":
case "height":
case "device-width":
case "device-height":
expValue = toPx(expValue), value = toPx(value);
break;
case "resolution":
expValue = toDpi(expValue), value = toDpi(value);
break;
case "aspect-ratio":
case "device-aspect-ratio":
case "device-pixel-ratio":
expValue = toDecimal(expValue), value = toDecimal(value);
break;
case "grid":
case "color":
case "color-index":
case "monochrome":
expValue = parseInt(expValue, 10) || 1, value = parseInt(value, 10) || 0;
}
switch (modifier) {
case "min":
return value >= expValue;
case "max":
return value <= expValue;
default:
return value === expValue;
}
});
return expressionsMatch && !inverse || !expressionsMatch && inverse;
});
}
function parseQuery(mediaQuery) {
return mediaQuery.split(",").map(function(query) {
query = query.trim();
var captures = query.match(RE_MEDIA_QUERY), modifier = captures[1], type = captures[2], expressions = captures[3] || "", parsed = {};
return parsed.inverse = !!modifier && "not" === modifier.toLowerCase(), parsed.type = type ? type.toLowerCase() : "all",
expressions = expressions.match(/\([^\)]+\)/g) || [], parsed.expressions = expressions.map(function(expression) {
var captures = expression.match(RE_MQ_EXPRESSION), feature = captures[1].toLowerCase().match(RE_MQ_FEATURE);
return {
modifier: feature[1],
feature: feature[2],
value: captures[2]
};
}), parsed;
});
}
function toDecimal(ratio) {
var numbers, decimal = Number(ratio);
return decimal || (numbers = ratio.match(/^(\d+)\s*\/\s*(\d+)$/), decimal = numbers[1] / numbers[2]),
decimal;
}
function toDpi(resolution) {
var value = parseFloat(resolution);
switch (String(resolution).match(RE_RESOLUTION_UNIT)[1]) {
case "dpcm":
return value / 2.54;
case "dppx":
return 96 * value;
default:
return value;
}
}
function toPx(length) {
var value = parseFloat(length);
switch (String(length).match(RE_LENGTH_UNIT)[1]) {
case "em":
case "rem":
return 16 * value;
case "cm":
return 96 * value / 2.54;
case "mm":
return 96 * value / 2.54 / 10;
case "in":
return 96 * value;
case "pt":
return 72 * value;
case "pc":
return 72 * value / 12;
default:
return value;
}
}
exports.match = matchQuery, exports.parse = parseQuery;
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__) {
"use strict";
function shallowEqualObjects(objA, objB) {
if (objA === objB) return !0;
if (!objA || !objB) return !1;
var aKeys = Object.keys(objA), bKeys = Object.keys(objB), len = aKeys.length;
if (bKeys.length !== len) return !1;
for (var i = 0; i < len; i++) {
var key = aKeys[i];
if (objA[key] !== objB[key]) return !1;
}
return !0;
}
module.exports = shallowEqualObjects;
}, function(module, __webpack_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);
}, 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 ? k : !1 === v ? negate(k) : "(".concat(realKey, ": ").concat(v, ")");
}, join = function(conds) {
return conds.join(" and ");
};
__webpack_exports__.a = function(obj) {
var rules = [];
return Object.keys(__WEBPACK_IMPORTED_MODULE_1__mediaQuery__.a.all).forEach(function(k) {
var v = obj[k];
null != v && rules.push(keyVal(k, v));
}), join(rules);
};
}, function(module, __webpack_exports__, __webpack_require__) {
"use strict";
function _objectSpread(target) {

@@ -77,3 +348,3 @@ for (var i = 1; i < arguments.length; i++) {

}
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 = {
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" ]),

@@ -131,172 +402,6 @@ scan: __WEBPACK_IMPORTED_MODULE_0_prop_types___default.a.oneOf([ "progressive", "interlace" ]),

};
}, function(module, __webpack_exports__, __webpack_require__) {
"use strict";
function _extends() {
return _extends = Object.assign || function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
}
return target;
}, _extends.apply(this, arguments);
}
function _typeof(obj) {
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);
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) throw new TypeError("Cannot call a class as a 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);
}
}
function _createClass(Constructor, protoProps, staticProps) {
return protoProps && _defineProperties(Constructor.prototype, protoProps), staticProps && _defineProperties(Constructor, staticProps),
Constructor;
}
function _possibleConstructorReturn(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 _assertThisInitialized(self) {
if (void 0 === self) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return self;
}
function _inherits(subClass, 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,
writable: !0,
configurable: !0
}
}), superClass && _setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
return (_setPrototypeOf = Object.setPrototypeOf || function(o, p) {
return o.__proto__ = p, o;
})(o, p);
}
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
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;
}
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 MediaQueryContextConsumer;
}), __webpack_require__.d(__webpack_exports__, "MediaQuery", function() {
return MediaQuery;
}), __webpack_require__.d(__webpack_exports__, "Context", function() {
return Context;
});
var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(6), __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__), __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(0), __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__), __WEBPACK_IMPORTED_MODULE_2_matchmediaquery__ = __webpack_require__(11), __WEBPACK_IMPORTED_MODULE_2_matchmediaquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_matchmediaquery__), __WEBPACK_IMPORTED_MODULE_3_hyphenate_style_name__ = __webpack_require__(3), __WEBPACK_IMPORTED_MODULE_4__mediaQuery__ = __webpack_require__(4), __WEBPACK_IMPORTED_MODULE_5__toQuery__ = __webpack_require__(13);
__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 values = _ref.values;
if (!values) return null;
var keys = Object.keys(values);
return 0 === keys.length ? null : keys.reduce(function(result, key) {
return result[Object(__WEBPACK_IMPORTED_MODULE_3_hyphenate_style_name__.a)(key)] = values[key],
result;
}, {});
}, getQuery = function(props) {
return props.query || Object(__WEBPACK_IMPORTED_MODULE_5__toQuery__.a)(omit(props, excludedQueryKeys));
}, MediaQuery = function(_React$Component) {
function MediaQuery() {
var _getPrototypeOf2, _this;
_classCallCheck(this, MediaQuery);
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(_this), "state", {
matches: !1,
mq: null,
query: "",
values: null
}), _defineProperty(_assertThisInitialized(_this), "componentDidMount", function() {
_this.state.mq.addListener(_this.updateMatches), _this.updateMatches();
}), _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", 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);
}), _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function() {
_this._unmounted = !0, _this.cleanupMediaQuery(_this.state.mq);
}), _defineProperty(_assertThisInitialized(_this), "cleanupMediaQuery", function(mq) {
mq && (mq.removeListener(_this.updateMatches), mq.dispose());
}), _defineProperty(_assertThisInitialized(_this), "updateMatches", function() {
_this._unmounted || _this.state.mq.matches !== _this.state.matches && _this.setState({
matches: _this.state.mq.matches
});
}), _defineProperty(_assertThisInitialized(_this), "render", function() {
return "function" == typeof _this.props.children ? _this.props.children(_this.state.matches) : _this.state.matches ? _this.props.children : null;
}), _this;
}
return _inherits(MediaQuery, _React$Component), _createClass(MediaQuery, null, [ {
key: "getDerivedStateFromProps",
value: function(props, state) {
var query = getQuery(props);
if (!query) throw new Error("Invalid or missing MediaQuery!");
var values = getValues(props);
if (query === state.query && values === state.values) return null;
var mq = __WEBPACK_IMPORTED_MODULE_2_matchmediaquery___default()(query, values || {}, !!values);
return {
matches: mq.matches,
mq: mq,
query: query,
values: values
};
}
} ]), MediaQuery;
}(__WEBPACK_IMPORTED_MODULE_0_react___default.a.Component);
_defineProperty(MediaQuery, "displayName", "MediaQuery"), _defineProperty(MediaQuery, "defaultProps", {
values: null
});
var Context = __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext(), MediaQueryContextConsumer = function(props) {
var values = __WEBPACK_IMPORTED_MODULE_0_react___default.a.useContext(Context);
return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(MediaQuery, _extends({
values: values
}, props));
};
MediaQueryContextConsumer.displayName = "MediaQueryContextConsumer";
}, function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
}, function(module, exports, __webpack_require__) {
var ReactIs = __webpack_require__(3);
module.exports = __webpack_require__(14)(ReactIs.isElement, !0);
}, function(module, exports, __webpack_require__) {
"use strict";

@@ -420,3 +525,3 @@ !function() {

}
var ReactIs = __webpack_require__(1), assign = __webpack_require__(9), ReactPropTypesSecret = __webpack_require__(2), checkPropTypes = __webpack_require__(10), has = Function.call.bind(Object.prototype.hasOwnProperty), printWarning = function() {};
var ReactIs = __webpack_require__(3), assign = __webpack_require__(15), ReactPropTypesSecret = __webpack_require__(4), checkPropTypes = __webpack_require__(16), has = Function.call.bind(Object.prototype.hasOwnProperty), printWarning = function() {};
printWarning = function(text) {

@@ -734,3 +839,3 @@ var message = "Warning: " + text;

}
var printWarning = function() {}, ReactPropTypesSecret = __webpack_require__(2), loggedTypeFailures = {}, has = Function.call.bind(Object.prototype.hasOwnProperty);
var printWarning = function() {}, ReactPropTypesSecret = __webpack_require__(4), loggedTypeFailures = {}, has = Function.call.bind(Object.prototype.hasOwnProperty);
printWarning = function(text) {

@@ -745,162 +850,27 @@ var message = "Warning: " + text;

}, module.exports = checkPropTypes;
}, function(module, exports, __webpack_require__) {
}, function(module, __webpack_exports__, __webpack_require__) {
"use strict";
function Mql(query, values, forceStatic) {
function addListener(listener) {
mql && mql.addListener(listener);
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]);
}
function removeListener(listener) {
mql && mql.removeListener(listener);
}
function update(evt) {
self.matches = evt.matches, self.media = evt.media;
}
function dispose() {
mql && mql.removeListener(update);
}
var self = this;
if (dynamicMatch && !forceStatic) {
var mql = dynamicMatch.call(window, query);
this.matches = mql.matches, this.media = mql.media, mql.addListener(update);
} else this.matches = staticMatch(query, values), this.media = query;
this.addListener = addListener, this.removeListener = removeListener, this.dispose = dispose;
return target;
}
function matchMedia(query, values, forceStatic) {
return new Mql(query, values, forceStatic);
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;
}
var staticMatch = __webpack_require__(12).match, dynamicMatch = "undefined" != typeof window ? window.matchMedia : null;
module.exports = matchMedia;
}, function(module, exports, __webpack_require__) {
"use strict";
function matchQuery(mediaQuery, values) {
return parseQuery(mediaQuery).some(function(query) {
var inverse = query.inverse, typeMatch = "all" === query.type || values.type === query.type;
if (typeMatch && inverse || !typeMatch && !inverse) return !1;
var expressionsMatch = query.expressions.every(function(expression) {
var feature = expression.feature, modifier = expression.modifier, expValue = expression.value, value = values[feature];
if (!value) return !1;
switch (feature) {
case "orientation":
case "scan":
return value.toLowerCase() === expValue.toLowerCase();
case "width":
case "height":
case "device-width":
case "device-height":
expValue = toPx(expValue), value = toPx(value);
break;
case "resolution":
expValue = toDpi(expValue), value = toDpi(value);
break;
case "aspect-ratio":
case "device-aspect-ratio":
case "device-pixel-ratio":
expValue = toDecimal(expValue), value = toDecimal(value);
break;
case "grid":
case "color":
case "color-index":
case "monochrome":
expValue = parseInt(expValue, 10) || 1, value = parseInt(value, 10) || 0;
}
switch (modifier) {
case "min":
return value >= expValue;
case "max":
return value <= expValue;
default:
return value === expValue;
}
});
return expressionsMatch && !inverse || !expressionsMatch && inverse;
});
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);
return "function" == typeof children ? children(matches) : matches ? children : null;
}
function parseQuery(mediaQuery) {
return mediaQuery.split(",").map(function(query) {
query = query.trim();
var captures = query.match(RE_MEDIA_QUERY), modifier = captures[1], type = captures[2], expressions = captures[3] || "", parsed = {};
return parsed.inverse = !!modifier && "not" === modifier.toLowerCase(), parsed.type = type ? type.toLowerCase() : "all",
expressions = expressions.match(/\([^\)]+\)/g) || [], parsed.expressions = expressions.map(function(expression) {
var captures = expression.match(RE_MQ_EXPRESSION), feature = captures[1].toLowerCase().match(RE_MQ_FEATURE);
return {
modifier: feature[1],
feature: feature[2],
value: captures[2]
};
}), parsed;
});
}
function toDecimal(ratio) {
var numbers, decimal = Number(ratio);
return decimal || (numbers = ratio.match(/^(\d+)\s*\/\s*(\d+)$/), decimal = numbers[1] / numbers[2]),
decimal;
}
function toDpi(resolution) {
var value = parseFloat(resolution);
switch (String(resolution).match(RE_RESOLUTION_UNIT)[1]) {
case "dpcm":
return value / 2.54;
case "dppx":
return 96 * value;
default:
return value;
}
}
function toPx(length) {
var value = parseFloat(length);
switch (String(length).match(RE_LENGTH_UNIT)[1]) {
case "em":
case "rem":
return 16 * value;
case "cm":
return 96 * value / 2.54;
case "mm":
return 96 * value / 2.54 / 10;
case "in":
return 96 * value;
case "pt":
return 72 * value;
case "pc":
return 72 * value / 12;
default:
return value;
}
}
exports.match = matchQuery, exports.parse = parseQuery;
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, __webpack_exports__, __webpack_require__) {
"use strict";
function keyVal(k, v) {
var realKey = Object(__WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__.a)(k);
return "number" == typeof v && (v = "".concat(v, "px")), !0 === v ? k : !1 === v ? negate(k) : "(".concat(realKey, ": ").concat(v, ")");
}
function join(conds) {
return conds.join(" and ");
}
var __WEBPACK_IMPORTED_MODULE_0_hyphenate_style_name__ = __webpack_require__(3), __WEBPACK_IMPORTED_MODULE_1__mediaQuery__ = __webpack_require__(4), negate = function(cond) {
return "not ".concat(cond);
};
__webpack_exports__.a = function(obj) {
var rules = [];
return Object.keys(__WEBPACK_IMPORTED_MODULE_1__mediaQuery__.a.all).forEach(function(k) {
var v = obj[k];
null != v && rules.push(keyVal(k, v));
}), join(rules);
};
__webpack_exports__.a = MediaQuery;
var __WEBPACK_IMPORTED_MODULE_0__useMediaQuery__ = __webpack_require__(0);
} ]);
});
//# sourceMappingURL=react-responsive.js.map

2

dist/react-responsive.min.js

@@ -1,2 +0,2 @@

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

39

package.json
{
"name": "react-responsive",
"description": "Media queries in react for responsive design",
"version": "7.0.0",
"version": "8.0.0-beta.0",
"homepage": "http://github.com/contra/react-responsive",

@@ -32,3 +32,4 @@ "repository": {

"matchmediaquery": "^0.3.0",
"prop-types": "^15.6.1"
"prop-types": "^15.6.1",
"shallow-equal": "^1.1.0"
},

@@ -46,2 +47,3 @@ "peerDependencies": {

"@babel/register": "^7.0.0",
"@stae/linters": "^0.1.2",
"babel-core": "^7.0.0-bridge.0",

@@ -54,5 +56,4 @@ "babel-eslint": "^10.0.0",

"eslint": "^5.0.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-react": "^7.7.0",
"jsdom": "^15.0.0",
"match-media-mock": "^0.1.1",
"mocha": "^6.0.0",

@@ -88,32 +89,2 @@ "react": "^16.8.0",

},
"eslintConfig": {
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"plugins": [
"import",
"react"
],
"env": {
"browser": true,
"node": true,
"mocha": true
},
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 8,
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": [
2,
"never"
],
"react/prop-types": 0
}
},
"engines": {

@@ -120,0 +91,0 @@ "node": ">= 0.10"

269

README.md

@@ -1,4 +0,3 @@

# react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Support us][gittip-image]][gittip-url]
# react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]
## Information

@@ -20,3 +19,3 @@

<tr>
<td colspan="2"><a href="http://contra.io/react-responsive/">Demo</a></td>
<td colspan='2'><a href='http://contra.io/react-responsive/'>Demo</a></td>
</tr>

@@ -27,5 +26,2 @@ </table>

This module is pretty straightforward: You specify a set of requirements, and the children will be rendered if they are met. Also handles changes so if you resize or flip or whatever it all just works.
## Install

@@ -37,8 +33,44 @@

## Usage
## Example Usage
A MediaQuery element functions like any other React component, which means you can nest them and do all the normal jazz.
### With Hooks
### Using CSS Media Queries
```jsx
import React from 'react';
import { useMediaQuery } from 'react-responsive';
const Example = () => {
const isDesktopOrLaptop = useMediaQuery({
query: '(min-device-width: 1224px)'
});
const isBigScreen = useMediaQuery({ query: '(min-device-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>
);
};
```
### With Components
```jsx

@@ -49,24 +81,18 @@ import MediaQuery from 'react-responsive';

<div>
<div>Device Test!</div>
<MediaQuery query="(min-device-width: 1224px)">
<div>You are a desktop or laptop</div>
<MediaQuery query="(min-device-width: 1824px)">
<div>You also have a huge screen</div>
<h1>Device Test!</h1>
<MediaQuery minDeviceWidth={1224} device={{ deviceWidth: 1600 }}>
<p>You are a desktop or laptop</p>
<MediaQuery minDeviceWidth={1824}>
<p>You also have a huge screen</p>
</MediaQuery>
<MediaQuery query="(max-width: 1224px)">
<div>You are sized like a tablet or mobile phone though</div>
</MediaQuery>
</MediaQuery>
<MediaQuery query="(max-device-width: 1224px)">
<div>You are a tablet or mobile phone</div>
<MediaQuery minResolution='2dppx'>
{/* it also supports render prop */}
{matches =>
matches ?
<p>You are retina</p>
:
<p>You are not retina</p>
}
</MediaQuery>
<MediaQuery query="(orientation: portrait)">
<div>You are portrait</div>
</MediaQuery>
<MediaQuery query="(orientation: landscape)">
<div>You are landscape</div>
</MediaQuery>
<MediaQuery query="(min-resolution: 2dppx)">
<div>You are retina</div>
</MediaQuery>
</div>

@@ -76,65 +102,39 @@ );

## API
### Using Properties
To make things more idiomatic to react, you can use camelcased shorthands to construct media queries.
To make things more idiomatic to react, you can use camel-cased shorthands to construct media queries.
For a list of all possible shorthands and value types see https://github.com/contra/react-responsive/blob/master/src/mediaQuery.js#L9.
For a list of all possible shorthands and value types see https://github.com/wearefractal/react-responsive/blob/master/src/mediaQuery.js#L9
Any numbers given as shorthand will be expanded to px (`1234` will become `'1234px'`).
The CSS media queries in the example above could be constructed like this:
Any numbers given as a shorthand will be expanded to px (`1234` will become `'1234px'`)
```jsx
import MediaQuery from 'react-responsive';
import React from 'react';
import { useMediaQuery } from 'react-responsive';
const Example = () => (
<div>
<div>Device Test!</div>
<MediaQuery minDeviceWidth={1224}>
<div>You are a desktop or laptop</div>
<MediaQuery minDeviceWidth={1824}>
<div>You also have a huge screen</div>
</MediaQuery>
<MediaQuery maxWidth={1224}>
<div>You are sized like a tablet or mobile phone though</div>
</MediaQuery>
</MediaQuery>
<MediaQuery maxDeviceWidth={1224}>
<div>You are a tablet or mobile phone</div>
</MediaQuery>
<MediaQuery orientation="portrait">
<div>You are portrait</div>
</MediaQuery>
<MediaQuery orientation="landscape">
<div>You are landscape</div>
</MediaQuery>
<MediaQuery minResolution="2dppx">
<div>You are retina</div>
</MediaQuery>
</div>
);
```
const Example = () => {
const isDesktopOrLaptop = useMediaQuery({ minDeviceWidth: 1224 });
const isBigScreen = useMediaQuery({ minDeviceWidth: 1824 });
const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 });
const isTabletOrMobileDevice = useMediaQuery({ maxDeviceWidth: 1224 });
const isPortrait = useMediaQuery({ orientation: 'portrait' });
const isRetina = useMediaQuery({ minResolution: '2dppx' });
### Rendering with a child function
You may also specify a function for the child of the MediaQuery component. When the component renders, it is passed whether or not the given media query matches. This function must return a single element or `null`.
```jsx
<MediaQuery minDeviceWidth={700}>
{(matches) => {
if (matches) {
return <div>Media query matches!</div>;
} else {
return <div>Media query does not match!</div>;
}
}}
</MediaQuery>
return (
<div>
...
</div>
);
};
```
### Forcing device properties with `values` prop
### Forcing a device with the `device` prop
At times you may need to render components with different values than what gets automatically detected. This is especially useful in a Node environment where these settings can't be detected (SSR) or for testing.
At times you may need to render components with different device settings than what gets automatically detected. This is especially useful in a Node environment where these settings can't be detected (SSR) or for testing.
#### Possible Values
#### Possible Keys

@@ -150,33 +150,24 @@ `orientation`, `scan`, `aspectRatio`, `deviceAspectRatio`,

Note: The `values` property always applies, even when values could be detected (where window.matchMedia exists).
Note: The `device` property always applies, even when it can be detected (where window.matchMedia exists).
```jsx
import MediaQuery from 'react-responsive';
import { useMediaQuery } from 'react-responsive';
const Example = () => (
<div>
<div>Device Test!</div>
<MediaQuery minDeviceWidth={1224} values={{ deviceWidth: 1600 }}>
<div>You are a desktop or laptop</div>
<MediaQuery minDeviceWidth={1824}>
<div>You also have a huge screen</div>
</MediaQuery>
<MediaQuery maxWidth={1224}>
<div>You are sized like a tablet or mobile phone though</div>
</MediaQuery>
</MediaQuery>
<MediaQuery maxDeviceWidth={1224}>
<div>You are a tablet or mobile phone</div>
</MediaQuery>
<MediaQuery orientation="portrait">
<div>You are portrait</div>
</MediaQuery>
<MediaQuery orientation="landscape">
<div>You are landscape</div>
</MediaQuery>
<MediaQuery minResolution="2dppx">
<div>You are retina</div>
</MediaQuery>
</div>
);
const Example = () => {
const isDesktopOrLaptop = useMediaQuery(
{ minDeviceWidth: 1224 },
{ deviceWidth: 1600 } // `device` prop
);
return (
<div>
{isDesktopOrLaptop &&
<p>
this will always get rendered even if device is shorter than 1224px,
that's because we overrode device settings with 'deviceWidth: 1600'.
</p>
}
</div>
);
}
```

@@ -186,10 +177,10 @@

You can also pass `values` to all components in the tree through a React [Context](https://reactjs.org/docs/context.html).
You can also pass `device` to every `useMediaQuery` hook in the components tree through a React [Context](https://reactjs.org/docs/context.html).
This should ease up server-side-rendering and testing in a Node environment, e.g:
##### Server Side Rendering
##### Server-Side Rendering
```javascript
import Responsive, { Context as ResponsiveContext } from 'react-responsive';
import { renderToString } from "react-dom/server";
```jsx
import { Context as ResponsiveContext } from 'react-responsive';
import { renderToString } from 'react-dom/server';
import App from './App';

@@ -200,3 +191,3 @@

const mobileApp = renderToString(
<ResponsiveContext.Provider value={{ deviceWidth: 500 }}>
<ResponsiveContext.Provider value={{ width: 500 }}>
<App />

@@ -210,4 +201,4 @@ </ResponsiveContext.Provider>

```javascript
import Responsive, { Context as ResponsiveContext } from 'react-responsive';
```jsx
import { Context as ResponsiveContext } from 'react-responsive';
import { render } from '@testing-library/react';

@@ -219,32 +210,43 @@ import ProductsListing from './ProductsListing';

const { container: mobile } = render(
<ResponsiveContext.Provider value={{ deviceWidth: 300 }}>
<ResponsiveContext.Provider value={{ width: 300 }}>
<ProductsListing />
</ResponsiveContext>
)
</ResponsiveContext.Provider>
);
expect(mobile).toMatchSnapshot();
const { container: desktop } = render(
<ResponsiveContext.Provider value={{ deviceWidth: 1000 }}>
<ResponsiveContext.Provider value={{ width: 1000 }}>
<ProductsListing />
</ResponsiveContext>
)
</ResponsiveContext.Provider>
);
expect(desktop).toMatchSnapshot();
})
})
});
});
```
Note that if any underlying component already has a `values` prop passed in it will take precedence over the one from context.
Note that if anything has a `device` prop passed in it will take precedence over the one from context.
If this doesn't fit your needs and you are using [redux](http://redux.js.org/) you might want to take a look
at [react-responsive-redux](https://github.com/modosc/react-responsive-redux) which was made to solve a similar problem.
## Easy Mode
### Common use cases
That's it! Now you can create your application specific breakpoints and reuse them easily. Here is an example:
```javascript
import Responsive from 'react-responsive';
```jsx
import { useMediaQuery } from 'react-responsive';
const Desktop = props => <Responsive {...props} minWidth={992} />;
const Tablet = props => <Responsive {...props} minWidth={768} maxWidth={991} />;
const Mobile = props => <Responsive {...props} maxWidth={767} />;
const Default = props => <Responsive {...props} minWidth={768} />;
const Desktop = ({ children }) => {
const isDesktop = useMediaQuery({ minWidth: 992 })
return isDesktop ? children : null
}
const Tablet = ({ children }) => {
const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 })
return isTablet ? children : null
}
const Mobile = ({ children }) => {
const isMobile = useMediaQuery({ maxWidth: 767 })
return isMobile ? children : null
}
const Default = ({ children }) => {
const isNotMobile = useMediaQuery({ minWidth: 768 })
return isNotMobile ? children : null
}

@@ -301,7 +303,4 @@ const Example = () => (

[gittip-url]: https://www.gittip.com/WeAreFractal/
[gittip-image]: http://img.shields.io/gittip/WeAreFractal.svg
[downloads-image]: http://img.shields.io/npm/dm/react-responsive.svg
[npm-url]: https://npmjs.org/package/react-responsive
[npm-image]: http://img.shields.io/npm/v/react-responsive.svg
dist/react-responsive.js.map

Sorry, the diff of this file is not supported yet

dist/react-responsive.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc