Travis build: 214

snippet_data/snippetList.json

@@ -563,6 +563,23 @@
         "hash": "2146f00ffd55bd78f63e0543922b73cdc339acf728067bf96f20c05eca5306ab"
       }
     },
+    {
+      "id": "useMediaQuery",
+      "type": "snippetListing",
+      "title": "useMediaQuery",
+      "attributes": {
+        "text": "A hook that returns a value based on a media query.\n\n- Check if `window` and `window.matchMedia` exist, return `whenFalse` if not.\n- Use `window.matchMedia()` to match the given `query`, cast its `matches` property to a boolean and store in a state variable, `match`, using `React.useState()`.\n- Use `React.useEffect()` to add a listener for changes and to clean up the listeners after the hook is destroyed.\n- Return either `whenTrue` or `whenFalse` based on the value of `match`.\n\n",
+        "tags": [
+          "hooks",
+          "state",
+          "effect",
+          "intermediate"
+        ]
+      },
+      "meta": {
+        "hash": "e1df67f6c744bdc52d523b50beb91ddc2ecb5469741f27140596a3b8e2dcfe18"
+      }
+    },
     {
       "id": "useNavigatorOnLine",
       "type": "snippetListing",

snippet_data/snippets.json

@@ -903,6 +903,33 @@
         "authorCount": 3
       }
     },
+    {
+      "id": "useMediaQuery",
+      "title": "useMediaQuery",
+      "type": "snippet",
+      "attributes": {
+        "fileName": "useMediaQuery.md",
+        "text": "A hook that returns a value based on a media query.\n\n- Check if `window` and `window.matchMedia` exist, return `whenFalse` if not.\n- Use `window.matchMedia()` to match the given `query`, cast its `matches` property to a boolean and store in a state variable, `match`, using `React.useState()`.\n- Use `React.useEffect()` to add a listener for changes and to clean up the listeners after the hook is destroyed.\n- Return either `whenTrue` or `whenFalse` based on the value of `match`.\n\n",
+        "codeBlocks": {
+          "style": "",
+          "code": "const useMediaQuery = (query, whenTrue, whenFalse) => {\n  if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined') return whenFalse;\n  \n  const mediaQuery = window.matchMedia(query);\n  const [match, setMatch] = React.useState(!!mediaQuery.matches);\n\n  React.useEffect(() => {    \n    const handler = () => setMatch(!!mediaQuery.matches);\n    mediaQuery.addListener(handler);\n    return () => mediaQuery.removeListener(handler);\n  }, []);\n\n  return match ? whenTrue : whenFalse;\n};",
+          "example": "const ResponsiveText = () => {\n  const text = useMediaQuery(\n    '(max-width: 400px)', 'Less than 400px wide', 'More than 400px wide'\n  );\n  \n  return <span>{text}</span>;\n}\n\nReactDOM.render(<ResponsiveText />, document.getElementById('root'));"
+        },
+        "tags": [
+          "hooks",
+          "state",
+          "effect",
+          "intermediate"
+        ]
+      },
+      "meta": {
+        "hash": "e1df67f6c744bdc52d523b50beb91ddc2ecb5469741f27140596a3b8e2dcfe18",
+        "firstSeen": "1578055186",
+        "lastUpdated": "1578055186",
+        "updateCount": 2,
+        "authorCount": 2
+      }
+    },
     {
       "id": "useNavigatorOnLine",
       "title": "useNavigatorOnLine",