React-responsive

chapter07/package-lock.json

@@ -3164,8 +3164,7 @@
         "bootstrap": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.2.tgz",
-            "integrity": "sha512-3bP609EdMc/8EwgGp8KgpN8HwnR4V4lZ9CTi5pImMrXNxpkw7dK1B05aMwQWpG1ZWmTLlBSN/uzkuz5GsmQNFA==",
-            "dev": true
+            "integrity": "sha512-3bP609EdMc/8EwgGp8KgpN8HwnR4V4lZ9CTi5pImMrXNxpkw7dK1B05aMwQWpG1ZWmTLlBSN/uzkuz5GsmQNFA=="
         },
         "bowser": {
             "version": "1.9.3",
@@ -4127,6 +4126,11 @@
                 "isobject": "^3.0.1"
             }
         },
+        "css-mediaquery": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+            "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
+        },
         "css-select": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -7700,8 +7704,7 @@
         "hyphenate-style-name": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
-            "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es=",
-            "dev": true
+            "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es="
         },
         "i18next": {
             "version": "11.3.6",
@@ -8733,6 +8736,14 @@
             "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==",
             "dev": true
         },
+        "matchmediaquery": {
+            "version": "0.3.0",
+            "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.0.tgz",
+            "integrity": "sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==",
+            "requires": {
+                "css-mediaquery": "^0.1.2"
+            }
+        },
         "material-colors": {
             "version": "1.2.6",
             "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@@ -11738,6 +11749,16 @@
             "integrity": "sha512-p84kBqGaMoa7VYT0vZ/aOYRfJB+gw34yjpda1Z5KeLflg70HipZOT+MXQenEhdkPAABuE2Astq4zEPdMqUQxcg==",
             "dev": true
         },
+        "react-responsive": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-5.0.0.tgz",
+            "integrity": "sha512-oEimZ0FTCC3/pjGDEBHOz06nWbBNDIbMGOdRYp6K9SBUmrqgNAX77hTiqvmRQeLyI97zz4F4kiaFRxFspDxE+w==",
+            "requires": {
+                "hyphenate-style-name": "^1.0.0",
+                "matchmediaquery": "^0.3.0",
+                "prop-types": "^15.6.1"
+            }
+        },
         "react-split-pane": {
             "version": "0.1.81",
             "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-0.1.81.tgz",

chapter07/package.json

@@ -34,6 +34,7 @@
         "react-a11y": "^1.0.0",
         "react-dom": "^16.4.1",
         "react-i18next": "^7.8.0",
+        "react-responsive": "^5.0.0",
         "styled-components": "^3.3.3"
     },
     "scripts": {

chapter07/src/App.4.js

@@ -0,0 +1,53 @@
+/* @flow */
+
+import React, { Component } from "react";
+import MediaQuery from "react-responsive";
+
+const XS = 576; // phone
+const SM = 768; // tablet
+const MD = 992; // desktop
+const LG = 1200; // large desktop
+
+class App extends Component<{}> {
+    render() {
+        return (
+            <div>
+                <MediaQuery minDeviceWidth={MD + 1}>
+                    <div>Device: desktop or laptop</div>
+
+                    <MediaQuery maxWidth={XS}>
+                        <div>Current Size: small phone </div>
+                    </MediaQuery>
+
+                    <MediaQuery minWidth={XS + 1} maxWidth={SM}>
+                        <div>Current Size: normal phone</div>
+                    </MediaQuery>
+
+                    <MediaQuery minWidth={SM + 1} maxWidth={MD}>
+                        <div>Current Size: tablet</div>
+                    </MediaQuery>
+
+                    <MediaQuery minWidth={MD + 1} maxWidth={LG}>
+                        <div>Current Size: normal desktop</div>
+                    </MediaQuery>
+
+                    <MediaQuery minWidth={LG + 1}>
+                        <div>Current Size: large desktop</div>
+                    </MediaQuery>
+                </MediaQuery>
+
+                <MediaQuery maxDeviceWidth={MD}>
+                    <div>Device: tablet or phone</div>
+                    <MediaQuery orientation="portrait">
+                        <div>Orientation: portrait</div>
+                    </MediaQuery>
+                    <MediaQuery orientation="landscape">
+                        <div>Orientation: landscape</div>
+                    </MediaQuery>
+                </MediaQuery>
+            </div>
+        );
+    }
+}
+
+export default App;

chapter07/src/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import App from "./App.3";
+import App from "./App.4";
 import registerServiceWorker from "./registerServiceWorker";
 import "../node_modules/bootstrap/dist/css/bootstrap.min.css";