Merge pull request #2536 from willnguyen1312/pr/update-use-media

fix: update useMedia hook to use recommended approach of MDN
streamich · Jan 13, 2024 · 3264d96 · 3264d96
2 parents e27c193 + e7379f0
commit 3264d96
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/useMedia.ts b/src/useMedia.ts
@@ -34,12 +34,12 @@ const useMedia = (query: string, defaultState?: boolean) => {
       setState(!!mql.matches);
     };
 
-    mql.addListener(onChange);
+    mql.addEventListener('change', onChange);
     setState(mql.matches);
 
     return () => {
       mounted = false;
-      mql.removeListener(onChange);
+      mql.removeEventListener('change', onChange);
     };
   }, [query]);
 

diff --git a/tests/useMedia.test.ts b/tests/useMedia.test.ts
@@ -4,8 +4,8 @@ import { useMedia } from '../src';
 
 const createMockMediaMatcher = (matches: Record<string, boolean>) => (qs: string) => ({
   matches: matches[qs] ?? false,
-  addListener: () => {},
-  removeListener: () => {},
+  addEventListener: () => {},
+  removeEventListener: () => {},
 });
 
 describe('useMedia', () => {