fix: add exception for MediaQueryList event listener for Safari < 14

mg901 · Jan 12, 2021 · 8b989f0 · 8b989f0
1 parent abbd459
commit 8b989f0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -127,6 +127,15 @@
         "example",
         "ideas"
       ]
+    },
+    {
+      "login": "mckelveygreg",
+      "name": "Greg McKelvey",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/16110122?v=4",
+      "profile": "https://mckelveygreg.github.io/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

diff --git a/README.md b/README.md
@@ -314,6 +314,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/all-contri
     <td align="center"><a href="https://github.com/Ontopic"><img src="https://avatars0.githubusercontent.com/u/1599991?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ontopic</b></sub></a><br /><a href="#ideas-Ontopic" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://iryanbell.com/"><img src="https://avatars0.githubusercontent.com/u/25379378?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ryan Bell</b></sub></a><br /><a href="#ideas-iRyanBell" title="Ideas, Planning, & Feedback">🤔</a></td>
     <td align="center"><a href="https://bartnagel.ca/"><img src="https://avatars1.githubusercontent.com/u/199635?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bart Nagel</b></sub></a><br /><a href="https://github.com/mg901/styled-breakpoints/issues?q=author%3Atremby" title="Bug reports">🐛</a> <a href="https://github.com/mg901/styled-breakpoints/commits?author=tremby" title="Code">💻</a> <a href="#example-tremby" title="Examples">💡</a> <a href="#ideas-tremby" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://mckelveygreg.github.io/"><img src="https://avatars2.githubusercontent.com/u/16110122?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Greg McKelvey</b></sub></a><br /><a href="https://github.com/mg901/styled-breakpoints/commits?author=mckelveygreg" title="Code">💻</a></td>
   </tr>
 </table>
 

diff --git a/react-emotion/index.js b/react-emotion/index.js
@@ -22,6 +22,18 @@ const useBreakpoint = (breakpoint) => {
     // Ensure the correct value is set in state as soon as possible
     setIsBreak(mq.matches);
 
+    // Safari < 14 can't use addEventListener on a MediaQueryList
+    // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+    if (!mq.addEventListener) {
+      // Update the state whenever the media query match state changes
+      mq.addListener(handleChange);
+
+      // Clean up on unmount and if the query changes
+      return function cleanup() {
+        mq.removeListener(handleChange);
+      };
+    }
+
     // Update the state whenever the media query match state changes
     mq.addEventListener('change', handleChange);