react-responsive - npm Package Compare versions

Comparing version 1.3.0 to 1.3.2

CHANGELOG.md

 ## Change Log
 
-### upcoming (2017/05/09 01:13 +00:00)
+### upcoming (2017/07/14 14:47 +00:00)
+- [516f270](https://github.com/contra/react-responsive/commit/516f2703dd4f35611d60a399ebd61273140ff88e) merge (@contra)
+- [40fe34e](https://github.com/contra/react-responsive/commit/40fe34e003669f44692aedb054079126bedc5bc4) build (@contra)
+- [85ae4cd](https://github.com/contra/react-responsive/commit/85ae4cd10fb0ea98a313f4335590452893f329ad) build (@contra)
+- [69cde10](https://github.com/contra/react-responsive/commit/69cde106d817b3f4df7cbdd540ed27edfcc7f2d8) changes (@contra)
+- [#106](https://github.com/contra/react-responsive/pull/106) Fixing a memory leak. (@ncochard)
+- [00af280](https://github.com/contra/react-responsive/commit/00af280f57d979963d6c1d445e9c8c088ee03b82) 1.3.1
+- [1e8dcb9](https://github.com/contra/react-responsive/commit/1e8dcb9b790c4ce8cf24b96936f4d5760c3a3494) Created 'matchmediaquery' as a replacement for 'matchmedia'.
+- [6df7684](https://github.com/contra/react-responsive/commit/6df7684736797589245a643eb72e8e243dd987be) Fix for a memory leak.
+- [#102](https://github.com/contra/react-responsive/pull/102) Close #74 (@WRONGWAY4YOU)
+- [7877b80](https://github.com/contra/react-responsive/commit/7877b8003dc8f69f6350304c319daa3e35351aae) Merge branch 'master' into iss74 (@wrongway4you)
+- [374b290](https://github.com/contra/react-responsive/commit/374b290722e50c7bade5e136a08ad53671b7df4a) Close #74 (@wrongway4you)
+- [4156475](https://github.com/contra/react-responsive/commit/4156475e882fa3f8098991a6b713dd743b24a739) Merge branch 'remove-npm-bin-prefixes' (@wrongway4you)
+- [#101](https://github.com/contra/react-responsive/pull/101) Remove unneeded "$(npm bin)/" prefixes (@WRONGWAY4YOU)
+- [adfaf69](https://github.com/contra/react-responsive/commit/adfaf69be82b56f91c66da7b17735aa4faa901f5) Remove unneeded "$(npm bin)/" prefixes in `package.json` (@wrongway4you)
+- [#100](https://github.com/contra/react-responsive/pull/100) Document common use cases (@sonaye)
+- [b917322](https://github.com/contra/react-responsive/commit/b917322352dbb68939f2e1f140a89e4836dad4d4) Document common use cases (@sonaye)
+
+### v1.3.0 (2017/05/09 01:13 +00:00)
+- [44a7bf8](https://github.com/contra/react-responsive/commit/44a7bf8bd6f4289c4a644d4d1cdefbc5b01523c2) 1.3.0 (@contra)
 - [#97](https://github.com/contra/react-responsive/pull/97) Add onChange and onChangeBefore callbacks (@hiddenboox)
@@ -146,3 +165,3 @@ - [6cb52b1](https://github.com/contra/react-responsive/commit/6cb52b15a452f1189bd4f89a4c5ce41bee21fe02) Add onBeforeChange callback (@hiddenboox)
 - [#16](https://github.com/contra/react-responsive/pull/16) Use `hyphenate-style-name` module instead of React internal (@rexxars)
-- [7046106](https://github.com/contra/react-responsive/commit/704610624d1ede95c0043e43a4be8fa6346315c3) Use `hyphenate-style-name` module instead of React internal
+- [7046106](https://github.com/contra/react-responsive/commit/704610624d1ede95c0043e43a4be8fa6346315c3) Use `hyphenate-style-name` module instead of React internal (@rexxars)
 
@@ -161,4 +180,4 @@ ### v0.0.7 (2015/07/22 06:22 +00:00)
 - [7d05ab6](https://github.com/contra/react-responsive/commit/7d05ab60e7feb53d118ea94f92e5103bdae08627) change names to MediaQuery and add `all` type (@phated)
+- [39ab71d](https://github.com/contra/react-responsive/commit/39ab71d2f60a238ae3ac78bc485f804f2e2fc07e) add type property (@phated)
 - [6c6054a](https://github.com/contra/react-responsive/commit/6c6054a48df4620c301f31ffe6e456f0a2000142) update readme (@phated)
-- [39ab71d](https://github.com/contra/react-responsive/commit/39ab71d2f60a238ae3ac78bc485f804f2e2fc07e) add type property (@phated)
 - [48e6c5d](https://github.com/contra/react-responsive/commit/48e6c5d6c3b8360603f2aeabb599b3c601cb74b9) update reactify, add example, use React.PropTypes.shape to define values (@phated)
@@ -165,0 +184,0 @@ - [759154b](https://github.com/contra/react-responsive/commit/759154bfb098aed3be707086d0448ec39cc42ffe) switch to matchmedia module for client/server abstraction (@phated)

dist/react-responsive.js

@@ -71,15 +71,15 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	
-	var _propTypes = __webpack_require__(7);
+	var _propTypes = __webpack_require__(8);
 	
 	var _propTypes2 = _interopRequireDefault(_propTypes);
 	
-	var _matchmedia = __webpack_require__(11);
+	var _matchmediaquery = __webpack_require__(11);
 	
-	var _matchmedia2 = _interopRequireDefault(_matchmedia);
+	var _matchmediaquery2 = _interopRequireDefault(_matchmediaquery);
 	
-	var _hyphenateStyleName = __webpack_require__(6);
+	var _hyphenateStyleName = __webpack_require__(7);
 	
 	var _hyphenateStyleName2 = _interopRequireDefault(_hyphenateStyleName);
 	
-	var _mediaQuery = __webpack_require__(4);
+	var _mediaQuery = __webpack_require__(5);
 	
@@ -177,5 +177,6 @@ var _mediaQuery2 = _interopRequireDefault(_mediaQuery);
 	        this._mql.removeListener(this.updateMatches);
+	        this._mql.dispose();
 	      }
 	
-	      this._mql = (0, _matchmedia2.default)(this.query, values);
+	      this._mql = (0, _matchmediaquery2.default)(this.query, values);
 	      this._mql.addListener(this.updateMatches);
@@ -202,2 +203,3 @@ this.updateMatches();
 	      this._mql.removeListener(this.updateMatches);
+	      this._mql.dispose();
 	    }
@@ -536,2 +538,22 @@ }, {
 /* 4 */
+/***/ (function(module, exports) {
+
+	/**
+	 * Copyright 2013-present, Facebook, Inc.
+	 * All rights reserved.
+	 *
+	 * This source code is licensed under the BSD-style license found in the
+	 * LICENSE file in the root directory of this source tree. An additional grant
+	 * of patent rights can be found in the PATENTS file in the same directory.
+	 */
+	
+	'use strict';
+	
+	var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+	
+	module.exports = ReactPropTypesSecret;
+
+
+/***/ }),
+/* 5 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -547,3 +569,3 @@
 	
-	var _propTypes = __webpack_require__(7);
+	var _propTypes = __webpack_require__(8);
 	
@@ -577,6 +599,5 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 	  resolution: stringOrNumber
-	};
 	
-	// media features
-	var features = _extends({
+	  // media features
+	};var features = _extends({
 	  minAspectRatio: _propTypes2.default.string,
@@ -640,3 +661,3 @@ maxAspectRatio: _propTypes2.default.string,
 /***/ }),
-/* 5 */
+/* 6 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -713,3 +734,3 @@
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, exports) {
@@ -736,3 +757,3 @@
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -774,22 +795,2 @@
 /***/ }),
-/* 8 */
-/***/ (function(module, exports) {
-
-	/**
-	 * Copyright 2013-present, Facebook, Inc.
-	 * All rights reserved.
-	 *
-	 * This source code is licensed under the BSD-style license found in the
-	 * LICENSE file in the root directory of this source tree. An additional grant
-	 * of patent rights can be found in the PATENTS file in the same directory.
-	 */
-	
-	'use strict';
-	
-	var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
-	
-	module.exports = ReactPropTypesSecret;
-
-
-/***/ }),
 /* 9 */
@@ -815,7 +816,7 @@ /***/ (function(module, exports, __webpack_require__) {
 	
-	var _hyphenateStyleName = __webpack_require__(6);
+	var _hyphenateStyleName = __webpack_require__(7);
 	
 	var _hyphenateStyleName2 = _interopRequireDefault(_hyphenateStyleName);
 	
-	var _mediaQuery = __webpack_require__(4);
+	var _mediaQuery = __webpack_require__(5);
 	
@@ -1040,2 +1041,3 @@ var _mediaQuery2 = _interopRequireDefault(_mediaQuery);
 	  this.removeListener = removeListener;
+	  this.dispose = dispose;
 	
@@ -1059,2 +1061,6 @@ function addListener(listener){
 	  }
+	
+	  function dispose(){
+	    mql.removeListener(update);
+	  }
 	}
@@ -1086,4 +1092,4 @@
 	  var invariant = __webpack_require__(3);
-	  var warning = __webpack_require__(5);
-	  var ReactPropTypesSecret = __webpack_require__(8);
+	  var warning = __webpack_require__(6);
+	  var ReactPropTypesSecret = __webpack_require__(4);
 	  var loggedTypeFailures = {};
@@ -1155,7 +1161,10 @@ }
 	var invariant = __webpack_require__(3);
+	var ReactPropTypesSecret = __webpack_require__(4);
 	
 	module.exports = function() {
-	  // Important!
-	  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
-	  function shim() {
+	  function shim(props, propName, componentName, location, propFullName, secret) {
+	    if (secret === ReactPropTypesSecret) {
+	      // It is still safe when called from React.
+	      return;
+	    }
 	    invariant(
@@ -1172,2 +1181,4 @@ false,
 	  };
+	  // Important!
+	  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
 	  var ReactPropTypes = {
@@ -1217,5 +1228,5 @@ array: shim,
 	var invariant = __webpack_require__(3);
-	var warning = __webpack_require__(5);
+	var warning = __webpack_require__(6);
 	
-	var ReactPropTypesSecret = __webpack_require__(8);
+	var ReactPropTypesSecret = __webpack_require__(4);
 	var checkPropTypes = __webpack_require__(12);
@@ -1527,2 +1538,16 @@
 	
+	    for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+	      var checker = arrayOfTypeCheckers[i];
+	      if (typeof checker !== 'function') {
+	        warning(
+	          false,
+	          'Invalid argument supplid to oneOfType. Expected an array of check functions, but ' +
+	          'received %s at index %s.',
+	          getPostfixForTypeWarning(checker),
+	          i
+	        );
+	        return emptyFunction.thatReturnsNull;
+	      }
+	    }
+	
 	    function validate(props, propName, componentName, location, propFullName) {
@@ -1660,2 +1685,5 @@ for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
 	  function getPreciseType(propValue) {
+	    if (typeof propValue === 'undefined' || propValue === null) {
+	      return '' + propValue;
+	    }
 	    var propType = getPropType(propValue);
@@ -1672,2 +1700,19 @@ if (propType === 'object') {
 	
+	  // Returns a string that is postfixed to a warning about an invalid type.
+	  // For example, "undefined" or "of type array"
+	  function getPostfixForTypeWarning(value) {
+	    var type = getPreciseType(value);
+	    switch (type) {
+	      case 'array':
+	      case 'object':
+	        return 'an ' + type;
+	      case 'boolean':
+	      case 'date':
+	      case 'regexp':
+	        return 'a ' + type;
+	      default:
+	        return type;
+	    }
+	  }
+	
 	  // Returns class name of the object, if any.
@@ -1674,0 +1719,0 @@ function getClassName(propValue) {

package.json

 {
   "name": "react-responsive",
   "description": "Media queries in react for responsive design",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "homepage": "http://github.com/contra/react-responsive",
@@ -31,3 +31,3 @@ "repository": {
     "hyphenate-style-name": "^1.0.0",
-    "matchmedia": "^0.1.2",
+    "matchmediaquery": "^0.2.0",
     "prop-types": "^15.5.7"
@@ -51,2 +51,3 @@ },
     "chai": "^3.5.0",
+    "cross-env": "^5.0.1",
     "eslint": "^3.9.0",
@@ -68,8 +69,10 @@ "eslint-config-rackt": "^1.1.1",
     "postversion": "npm run changelog",
-    "start": "$(npm bin)/webpack-dev-server --config webpack.config.samples.js  --content-base samples/sandbox/src --host 0.0.0.0 --hot --inline --port 3333",
-    "build": "$(npm bin)/webpack",
+    "start": "webpack-dev-server --config webpack.config.samples.js  --content-base samples/sandbox/src --host 0.0.0.0 --hot --inline --port 3333",
+    "build:umd": "cross-env BUILD_MODE=umd webpack",
+    "build:umd-min": "cross-env BUILD_MODE=umd-min webpack",
+    "build": "npm run build:umd && npm run build:umd-min",
     "build:watch": "npm run build -- --watch",
     "clean": "rimraf dist",
-    "lint": "$(npm bin)/eslint src",
-    "test": "NODE_PATH=$NODE_PATH:$PWD/src $(npm bin)/mocha -R spec --compilers js:babel-register --require ./test/setup.js test/*_test.js",
+    "lint": "eslint src",
+    "test": "cross-env NODE_PATH=$NODE_PATH:$PWD/src mocha -R spec --compilers js:babel-register --require ./test/setup.js test/*_test.js",
     "changelog": "github-changes -o contra -r react-responsive -b master -f ./CHANGELOG.md --order-semver --use-commit-body",
@@ -76,0 +79,0 @@ "docs": "npm run docs:pre && npm run docs:build && npm run docs:publish",

README.md

@@ -232,2 +232,30 @@ # react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Support us][gittip-image]][gittip-url]
 
+### Common use cases
+
+```javascript
+import Responsive from 'react-responsive';
+
+// Desktop, tablet and mobile setup
+const Desktop = ({ children }) => <Responsive minWidth={992} children={children} />;
+const Tablet = ({ children }) => <Responsive minWidth={768} maxWidth={992} children={children} />;
+const Mobile = ({ children }) => <Responsive maxWidth={768} children={children} />;
+
+// Default (desktop, tablet) and mobile setup
+const Default = ({ children }) => <Responsive minWidth={768} children={children} />;
+const Mobile = ({ children }) => <Responsive maxWidth={768} children={children} />;
+
+const Example = () => (
+  <div>
+    <Desktop>You are a desktop or laptop</Desktop>
+    <Tablet>You are a tablet</Tablet>
+    <Mobile>You are a mobile phone</Mobile>
+    
+    <Default>You are not a mobile phone</Default>
+    <Mobile>You are a mobile phone</Mobile>
+  </div>
+);
+
+export default Example;
+```
+
 ## Browser Support
@@ -234,0 +262,0 @@

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

250408

increased by63.78%

Number of package files

7

increased by16.67%

Lines of code

1537

increased by8.01%

Number of lines in readme file

304

increased by10.14%

Worsened metrics

Dev dependency count

25

increased by4.17%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Addedmatchmediaquery@^0.2.0

• + Addedmatchmediaquery@0.2.1(transitive)

• - Removedmatchmedia@^0.1.2

• - Removedmatchmedia@0.1.2(transitive)