📱 Responsive

Author: alexlee-dev

website/src/client/App.tsx

@@ -3,10 +3,18 @@ import * as React from 'react';
 import Info from './components/Info';
 import Demo from './components/Demo';
 
+import useMedia from './hooks/useMedia';
+
 const App: React.SFC<{}> = () => {
+  const row = useMedia(
+    ['(min-width: 1000px)', '(min-width: 600px)'],
+    ['row', ''],
+    '',
+  );
+
   return (
     <div className="container">
-      <div className="row full-height">
+      <div className={`${row} full-height`}>
         <Info />
         <Demo />
       </div>

website/src/client/components/Demo.tsx

@@ -5,8 +5,14 @@ import entry from '../demo/entry';
 import startApplication from '../demo/startApplication';
 
 import { buttonContainerHeights } from '../constants';
+import useMedia from '../hooks/useMedia';
 
 const Demo: React.SFC<{}> = () => {
+  const columnSize = useMedia(
+    ['(min-width: 1000px)', '(min-width: 600px)'],
+    ['column-60', ''],
+    '',
+  );
   const [currentDemo, setCurrentDemo] = React.useState('entry');
   const [applicationCreated, setApplicationCreated] = React.useState(false);
   const [applicationStarted, setApplicationStarted] = React.useState(false);
@@ -16,7 +22,7 @@ const Demo: React.SFC<{}> = () => {
   }, []);
 
   return (
-    <div className="column column-60 flex-center">
+    <div className={`column ${columnSize} flex-center`}>
       <div id="demo" />
       <div
         id="demo-button-container"

website/src/client/components/Info.tsx

@@ -1,27 +1,40 @@
 import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBox, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+import useMedia from '../hooks/useMedia';
 
-const Info: React.SFC<{}> = () => (
-  <div className="column column-40 flex-center">
-    <h1 className="purple">create-cli-application</h1>
-    <blockquote className="blue-quote">
-      A bootstrapper for creating a cli application with Node.
-    </blockquote>
-    <span className="badge">
-      <FontAwesomeIcon icon={faBox} />
-      <span className="margin-left-sm">15.6kb gzipped</span>
-    </span>
-    <a
-      className="purple"
-      href="https://github.com/alexlee-dev/create-cli-application"
-      rel="noopener noreferrer"
-      target="_blank"
+const Info: React.SFC<{}> = () => {
+  const columnSize = useMedia(
+    ['(min-width: 1000px)', '(min-width: 600px)'],
+    ['column-40', ''],
+    '',
+  );
+
+  return (
+    <div
+      className={`column ${columnSize} flex-center ${
+        columnSize === '' && 'margin-bottom-md margin-top-lg'
+      }`}
     >
-      <FontAwesomeIcon icon={faExternalLinkAlt} />
-      <span className="margin-left-sm">View Documentation</span>
-    </a>
-  </div>
-);
+      <h1 className="purple">create-cli-application</h1>
+      <blockquote className="blue-quote">
+        A bootstrapper for creating a cli application with Node.
+      </blockquote>
+      <span className="badge">
+        <FontAwesomeIcon icon={faBox} />
+        <span className="margin-left-sm">15.6kb gzipped</span>
+      </span>
+      <a
+        className="purple"
+        href="https://github.com/alexlee-dev/create-cli-application"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <FontAwesomeIcon icon={faExternalLinkAlt} />
+        <span className="margin-left-sm">View Documentation</span>
+      </a>
+    </div>
+  );
+};
 
 export default Info;

website/src/client/hooks/useMedia.tsx

@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Use media query hook.
+ * @param queries Media Queries.
+ * @param values Values for each query.
+ * @param defaultValue Default value to fallback to.
+ */
+const useMedia = (
+  queries: string[],
+  values: any[],
+  defaultValue?: any,
+): any => {
+  // Array containing a media query list for each query
+  const mediaQueryLists = queries.map((q) => window.matchMedia(q));
+
+  // Function that gets value based on matching media query
+  const getValue = () => {
+    // Get index of first media query that matches
+    const index = mediaQueryLists.findIndex((mql) => mql.matches);
+    // Return related value or defaultValue if none
+    return typeof values[index] !== 'undefined' ? values[index] : defaultValue;
+  };
+
+  // State and setter for matched value
+  const [value, setValue] = useState(getValue);
+
+  useEffect(
+    () => {
+      // Event listener callback
+      // Note: By defining getValue outside of useEffect we ensure that it has ...
+      // ... current values of hook args (as this hook callback is created once on mount).
+      const handler = () => setValue(getValue);
+      // Set a listener for each media query with above handler as callback.
+      mediaQueryLists.forEach((mql) => mql.addListener(handler));
+      // Remove listeners on cleanup
+      return () =>
+        mediaQueryLists.forEach((mql) => mql.removeListener(handler));
+    },
+    [], // Empty array ensures effect is only run on mount and unmount
+  );
+
+  return value;
+};
+
+export default useMedia;

website/src/client/index.css

@@ -22,6 +22,14 @@
   margin-left: 10px;
 }
 
+.margin-bottom-md {
+  margin-bottom: 50px;
+}
+
+.margin-top-lg {
+  margin-top: 100px;
+}
+
 .blue {
   color: #00d3ff;
 }