merge

README.md

@@ -229,6 +229,34 @@ var A = React.createClass({
 });
 ```
 
+### 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
 
 ### Out of the box

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-responsive",
   "description": "Media queries in react for responsive design",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "homepage": "http://github.com/contra/react-responsive",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
   ],
   "dependencies": {
     "hyphenate-style-name": "^1.0.0",
-    "matchmedia": "^0.1.2",
+    "matchmediaquery": "^0.2.0",
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
@@ -47,6 +47,7 @@
     "babel-preset-stage-0": "^6.16.0",
     "babel-register": "^6.18.0",
     "chai": "^3.5.0",
+    "cross-env": "^5.0.1",
     "eslint": "^3.9.0",
     "eslint-config-rackt": "^1.1.1",
     "github-changes": "^1.0.4",
@@ -63,12 +64,14 @@
   "scripts": {
     "preversion": "npm run clean && npm run build && npm docs",
     "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",
     "docs": "npm run docs:pre && npm run docs:build && npm run docs:publish",
     "docs:pre": "gitbook install && rimraf _book",

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import matchMedia from 'matchmedia'
+import matchMedia from 'matchmediaquery'
 import hyphenate  from 'hyphenate-style-name'
 import mediaQuery from './mediaQuery'
 import toQuery  from './toQuery'
@@ -62,6 +62,7 @@ export default class MediaQuery extends React.Component {
 
     if (this._mql) {
       this._mql.removeListener(this.updateMatches)
+      this._mql.dispose();
     }
 
     this._mql = matchMedia(this.query, values)
@@ -74,7 +75,7 @@ export default class MediaQuery extends React.Component {
       this.props.onBeforeChange(this.state.matches)
     }
   }
-  
+
   componentDidUpdate(_, prevState) {
    if(this.props.onChange && prevState.matches !== this.state.matches) {
      this.props.onChange(this.state.matches)
@@ -83,6 +84,7 @@ export default class MediaQuery extends React.Component {
 
   componentWillUnmount() {
     this._mql.removeListener(this.updateMatches)
+    this._mql.dispose();
   }
 
   updateMatches = () => {

test/index_test.js

@@ -1,6 +1,6 @@
 var React = require('react');
 var MediaQuery = require('index');
-var mm = { default: require('matchmedia') };
+var mm = { default: require('matchmediaquery') };
 var assert = require('chai').assert;
 var sinon = require('sinon');
 var TestUtils = require('react-addons-test-utils');

test/setup.js

@@ -1,5 +1,5 @@
 var jsdom = require('jsdom').jsdom;
-var matchMedia = require('matchmedia');
+var matchMedia = require('matchmediaquery');
 
 process.env.NODE_ENV = 'test';
 

webpack.config.js

@@ -4,7 +4,8 @@ const webpack = require('webpack')
 module.exports = {
   entry: './src/index.js',
   output: {
-    filename: './dist/react-responsive.js',
+    filename: (process.env.BUILD_MODE == 'umd') ? './dist/react-responsive.js' :
+              './dist/react-responsive.min.js',
     sourceMapFilename: './dist/react-responsive.js.map',
     libraryTarget: 'umd',
     library: 'MediaQuery'
@@ -16,7 +17,9 @@ module.exports = {
   },
   plugins: [
     new webpack.optimize.OccurenceOrderPlugin(),
-    new webpack.optimize.DedupePlugin()
+    new webpack.optimize.DedupePlugin(),
+    ...((process.env.BUILD_MODE == 'umd-min') ?
+        [new webpack.optimize.UglifyJsPlugin()] : [])
   ],
   resolve: {
     extensions: [ '', '.js' ],