fix: support useMedia usage server-side

streamich · Jul 16, 2019 · 50a5160 · 50a5160
2 parents 446806c + d2de3d8
commit 50a5160
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/docs/useMedia.md b/docs/useMedia.md
@@ -2,7 +2,6 @@
 
 React sensor hook that tracks state of a CSS media query.
 
-
 ## Usage
 
 ```jsx
@@ -18,3 +17,11 @@ const Demo = () => {
   );
 };
 ```
+
+## Reference
+
+```ts
+useMedia(query: string, defaultState: boolean = false): boolean;
+```
+
+The `defaultState` parameter is only used as a fallback for server side rendering.
diff --git a/src/useMedia.ts b/src/useMedia.ts
@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
+import { isClient } from './util';
 
-const useMedia = (query: string) => {
-  const [state, setState] = useState(() => window.matchMedia(query).matches);
+const useMedia = (query: string, defaultState: boolean = false) => {
+  const [state, setState] = useState(isClient ? () => window.matchMedia(query).matches : defaultState);
 
   useEffect(() => {
     let mounted = true;