feat: support mobx 3

.eslintrc

@@ -2,6 +2,7 @@
   "parser": "babel-eslint",
   "extends": ["airbnb"],
   "rules": {
+    "react/require-default-props": 0,
     "react/forbid-prop-types": 0,
     "no-confusing-arrow": 0
   }

.travis.yml

@@ -1,6 +1,7 @@
 sudo: false
 language: node_js
 cache:
+  yarn: true
   directories:
     - node_modules
 notifications:

README.md

@@ -26,10 +26,9 @@ npm i --save mobx-react-matchmedia
 
 ## Usage
 
-```javascript
-
-// define mobx observable breakpoints
+Define mobx observable breakpoints
 
+```javascript
 import { observable } from 'mobx';
 
 const breakpoints = observable({
@@ -40,28 +39,32 @@ const breakpoints = observable({
   mu: '(min-width: 992px)',
   lg: '(min-width: 1200px)',
 });
+```
 
-// pass the breakpoints to the provider
+Pass the breakpoints to the MatchMediaProvider
 
+```javascript
 import { MatchMediaProvider } from 'mobx-react-matchmedia';
 
 <MatchMediaProvider breakpoints={breakpoints}>
   <Test breakpoints={breakpoints} />
 </MatchMediaProvider>
+```
 
-// pass the breakpoints as props and check if true/false
+Pass the breakpoints as props to components and check if true/false
 
+```javascript
 import { observer } from 'mobx-react';
 
 const Test = observer(({ breakpoints }) => (
   <div>
     {breakpoints.sm ? 'YES' : 'NO'}
   </div>
 ));
+```
 
-// now resize the browser window to see the changes
+Now resize the browser window to see the changes!
 
-```
 
 ## Contributing
 

demo/package.json

@@ -14,35 +14,36 @@
     "start": "webpack-dev-server --port 8888"
   },
   "dependencies": {
+    "babel-core": "^6.22.0",
     "basscss-colors": "2.2.0",
     "classnames": "2.2.5",
-    "font-awesome": "4.6.3",
-    "mobx": "2.5.1",
-    "mobx-react": "3.5.6",
-    "mobx-react-devtools": "4.2.6",
-    "react": "15.3.2",
-    "react-dom": "15.3.2"
+    "font-awesome": "4.7.0",
+    "mobx": "^3.0.2",
+    "mobx-react": "^4.1.0",
+    "mobx-react-devtools": "4.2.11",
+    "react": "15.4.2",
+    "react-dom": "15.4.2"
   },
   "peerDependencies": {
-    "react": "15.3.2",
-    "react-dom": "15.3.2"
+    "react": "15.4.2",
+    "react-dom": "15.4.2"
   },
   "devDependencies": {
-    "babel-loader": "6.2.5",
-    "babel-preset-es2015": "6.14.0",
-    "babel-preset-react": "6.11.1",
-    "babel-preset-stage-0": "6.5.0",
-    "css-loader": "0.25.0",
-    "eslint": "3.5.0",
+    "babel-loader": "6.2.10",
+    "babel-preset-es2015": "6.22.0",
+    "babel-preset-react": "6.22.0",
+    "babel-preset-stage-0": "6.22.0",
+    "css-loader": "0.26.1",
+    "eslint": "3.13.1",
     "file-loader": "0.9.0",
-    "html-webpack-plugin": "2.22.0",
-    "postcss": "5.2.0",
-    "postcss-import": "8.1.2",
-    "postcss-loader": "0.13.0",
+    "html-webpack-plugin": "2.26.0",
+    "postcss": "5.2.10",
+    "postcss-import": "9.1.0",
+    "postcss-loader": "1.2.2",
     "postcss-url": "5.1.2",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
-    "webpack": "1.13.2",
-    "webpack-dev-server": "1.15.1"
+    "webpack": "1.14.0",
+    "webpack-dev-server": "1.16.2"
   }
 }

demo/src/Breakpoints.jsx

@@ -4,11 +4,9 @@ import cx from 'classnames';
 
 const button = cx(['btn', 'rounded', 'btn-outline']);
 
-const Breakpoints = ({ bp }) => (
+export default observer(({ bp }) => (
   <div>
     <div className="mx4">
-      <br />
-      <br />
       <h1>MobX React MatchMedia</h1>
       <h4>Resize your browser window to see the breakpoints changing automatically.</h4>
       <p>
@@ -94,11 +92,4 @@ const Breakpoints = ({ bp }) => (
       </tbody>
     </table>
   </div>
-);
-
-
-Breakpoints.propTypes = {
-  bp: React.PropTypes.object,
-};
-
-export default observer(Breakpoints);
+));

demo/src/main.jsx

@@ -1,20 +1,21 @@
 import React from 'react';
 import { render } from 'react-dom';
+import { observable } from 'mobx';
 import DevTools from 'mobx-react-devtools';
 // import { MatchMediaProvider } from 'mobx-react-matchmedia'; // eslint-disable-line
 import { MatchMediaProvider } from '../../src';
 import Breakpoints from './Breakpoints';
 
 import './style.css';
 
-const breakpoints = {
+const breakpoints = observable({
   xs: '(max-width: 767px)',
   su: '(min-width: 768px)',
   sm: '(min-width: 768px) and (max-width: 991px)',
   md: '(min-width: 992px) and (max-width: 1199px)',
   mu: '(min-width: 992px)',
   lg: '(min-width: 1200px)',
-};
+});
 
 const App = () => (
   <MatchMediaProvider breakpoints={breakpoints}>

demo/src/style.css

@@ -5,6 +5,7 @@ html, body {
   height: 100%;
   margin: 0;
   padding: 0 50px;
+  color: #555;
 }
 
 body {

demo/webpack.config.js

@@ -18,14 +18,9 @@ const loaders = [{
   loader: 'file-loader?name=[name].[ext]',
 }];
 
-const postcss = $webpack => [
-  postcssImport({ addDependencyTo: $webpack }),
+const postcss = () => [
+  postcssImport(),
   postcssUrl('inline'),
-  // postcssExtend,
-  // postcssFocus,
-  // autoprefixer,
-  // precss,
-  // cssnano,
 ];
 
 module.exports = {
@@ -46,7 +41,7 @@ module.exports = {
   },
   plugins: [
     new HtmlWebpackPlugin({
-      template: path.resolve('src', 'index.html'),
+      template: path.resolve('.', 'src', 'index.html'),
     }),
   ],
   module: { loaders },