diff --git a/src/Debug/Debug.tsx b/src/Debug/Debug.tsx index b5a549b7c..1541e82ce 100644 --- a/src/Debug/Debug.tsx +++ b/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 extends React.Component, DebugState> { {debugTitle} e.stopPropagation()} name="Copy" /> diff --git a/src/useURLState/index.ts b/src/useURLState/index.ts index 7347f80d0..b17d70b2b 100644 --- a/src/useURLState/index.ts +++ b/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 = ( { getHash, getPathname, replaceState, getSearch } = options, ): [T, Dispatch>] => { // 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 = ( // 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()}`) diff --git a/src/useWindowSize/index.ts b/src/useWindowSize/index.ts index 73a2a7f93..43a21c273 100644 --- a/src/useWindowSize/index.ts +++ b/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, diff --git a/src/utils/isClient.ts b/src/utils/isClient.ts new file mode 100644 index 000000000..1243c95a3 --- /dev/null +++ b/src/utils/isClient.ts @@ -0,0 +1 @@ +export const isClient = () => typeof window !== "undefined"