**Feature:** Add support for SSR (#931)

* Add support for SSR

* Add isClient util

* Update snapshots

* Fix according to review comments

src/Debug/Debug.tsx

@@ -3,6 +3,7 @@ import CopyToClipboard from "react-copy-to-clipboard"
 
 import Icon from "../Icon/Icon"
 import Tooltip from "../Tooltip/Tooltip"
+import { isClient } from "../utils/isClient"
 import styled from "../utils/styled"
 import { makeRowsFromConfig } from "./makeRowsFromConfig"
 
@@ -148,7 +149,7 @@ class Debug<T> extends React.Component<DebugProps<T>, DebugState> {
           <Title>{debugTitle}</Title>
           <Icons>
             <CopyToClipboard
-              text={JSON.stringify({ currentUrl: window.location.href, debug: values }, null, 2)}
+              text={JSON.stringify({ currentUrl: isClient() ? window.location.href : "", debug: values }, null, 2)}
               onCopy={this.showCopyFeedback}
             >
               <Icon onClick={e => e.stopPropagation()} name="Copy" />

src/useURLState/index.ts

@@ -1,17 +1,27 @@
+import noop from "lodash/noop"
 import qs from "qs"
 import { Dispatch, SetStateAction, useEffect, useState } from "react"
 
+import { isClient } from "../utils/isClient"
+
 /**
  * Bunch of method that depends on `window`
  *
  * This is mostly for testing purpose but can also be used for SSR.
  */
-const options = {
-  getSearch: () => window.location.search,
-  getHash: () => window.location.hash,
-  getPathname: () => window.location.pathname,
-  replaceState: window.history.replaceState.bind(window.history),
-}
+const options = isClient()
+  ? {
+      getSearch: () => window.location.search,
+      getHash: () => window.location.hash,
+      getPathname: () => window.location.pathname,
+      replaceState: window.history.replaceState.bind(window.history),
+    }
+  : {
+      getSearch: noop,
+      getHash: noop,
+      getPathname: noop,
+      replaceState: noop,
+    }
 
 /**
  * Parse the search to object.
@@ -34,7 +44,7 @@ export const useURLState = <T>(
   { getHash, getPathname, replaceState, getSearch } = options,
 ): [T, Dispatch<SetStateAction<T>>] => {
   // Retrieve the value from the url search param
-  const searchValue: any = getSearchParams(getSearch())[name]
+  const searchValue: any = getSearchParams(getSearch() || "")[name]
 
   // Check if the value is valid, regarding the validator
   const encodedValue = decoder(searchValue)
@@ -44,7 +54,7 @@ export const useURLState = <T>(
 
   // Update the url search param on state update
   useEffect(() => {
-    const params = getSearchParams(getSearch())
+    const params = getSearchParams(getSearch() || "")
     params[name] = value
     const search = `?${qs.stringify(params)}`
     replaceState({}, "", `${getPathname()}${search === "?" ? "" : search}${getHash()}`)

src/useWindowSize/index.ts

@@ -1,9 +1,13 @@
 import { useEffect, useState } from "react"
+import { isClient } from "../utils/isClient"
 
 /**
  * Get the window size.
  */
 export const useWindowSize = () => {
+  if (!isClient()) {
+    return { width: -1, height: -1 }
+  }
   const [windowSize, setWindowSize] = useState({
     width: window.innerWidth,
     height: window.innerHeight,

src/utils/isClient.ts

@@ -0,0 +1 @@
+export const isClient = () => typeof window !== "undefined"