react-media-hook - npm Package Compare versions

Comparing version 0.4.9 to 0.5.0

LICENSE

+MIT License
+
+Copyright (c) 2020 Ilya Lesik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

index.js

 var React = require('react')
 
-function fallbackMathMedia (query) {
+function fallbackMatchMedia (query) {
   if (typeof matchMedia !== 'function') {
@@ -18,4 +18,11 @@ return null
 function useMedia (query) {
+  var mounted = React.useState(false)
+  var setMounted = mounted[1]
+
+  React.useEffect(function () {
+    setMounted(true)
+  }, [setMounted])
+
   var result = React.useState(function () {
-    return omitMatchMediaResult(fallbackMathMedia(query))
+    return omitMatchMediaResult(fallbackMatchMedia(query))
   })
@@ -30,6 +37,12 @@ var setResult = result[1]
     function () {
-      var matchMediaResult = fallbackMathMedia(query)
+      var matchMediaResult = fallbackMatchMedia(query)
       callback(matchMediaResult)
-      matchMediaResult.addListener(callback)
-      return function () { return matchMediaResult.removeListener(callback) }
+      if (matchMediaResult) {
+        matchMediaResult.addEventListener('change', callback)
+      }
+      return function () {
+        if (matchMediaResult) {
+          matchMediaResult.removeEventListener('change', callback)
+        }
+      }
     },
@@ -39,2 +52,6 @@ [callback, query]
 
+  if (!mounted[0]) {
+    return null
+  }
+
   return result[0]
@@ -41,0 +58,0 @@ }

package.json

 {
   "name": "react-media-hook",
-  "version": "0.4.9",
+  "version": "0.5.0",
   "main": "index.js",
@@ -20,3 +20,3 @@ "types": "index.d.ts",
       ],
-      "limit": "189 B",
+      "limit": "230 B",
       "path": "./index.js",
@@ -23,0 +23,0 @@ "running": false

README.md

 # react-media-hook
 
-[![CircleCI](https://circleci.com/gh/lessmess-dev/react-media-hook.svg?style=shield)](https://circleci.com/gh/lessmess-dev/react-media-hook)
+[![CircleCI](https://circleci.com/gh/ilyalesik/react-media-hook.svg?style=shield)](https://circleci.com/gh/ilyalesik/react-media-hook)
 [![npm version](https://img.shields.io/npm/v/react-media-hook.svg)](https://www.npmjs.com/package/react-media-hook)
@@ -56,8 +56,1 @@ [![npm downloads](https://img.shields.io/npm/dt/react-media-hook.svg)](https://www.npmjs.com/package/react-media-hook)
 Returns just *true* or *false*.
-
-## Sponsored
-<a href="https://lessmess.agency/?utm_source=react-media-hook">
-  <img src="https://lessmess.agency/badges/sponsored_by_lessmess.svg"
-       alt="Sponsored by Lessmess" width="236" height="54">
-</a>
-

No alert changes

Improved metrics

Total package byte prevSize

6169

23.04%

Number of package files

6

20%

Lines of code

62

29.17%

Worsened metrics

Number of lines in readme file

56

-11.11%

No dependency changes