Checks if the code is running on the browser or the server.
typeof
, Window
, Window.document
and Document.createElement()
to check if the code is running on the browser.useState()
hook to define the inBrowser
state variable.useEffect()
hook to update the inBrowser
state variable and clean up at the end.useMemo()
hook to memoize the return values of the custom hook.const isDOMavailable = !!(
typeof window !== 'undefined' &&
window.document &&
window.document.createElement
);
const useSSR = () => {
const [inBrowser, setInBrowser] = React.useState(isDOMavailable);
React.useEffect(() => {
setInBrowser(isDOMavailable);
return () => {
setInBrowser(false);
};
}, []);
const useSSRObject = React.useMemo(
() => ({
isBrowser: inBrowser,
isServer: !inBrowser,
canUseWorkers: typeof Worker !== 'undefined',
canUseEventListeners: inBrowser && !!window.addEventListener,
canUseViewport: inBrowser && !!window.screen
}),
[inBrowser]
);
return React.useMemo(
() => Object.assign(Object.values(useSSRObject), useSSRObject),
[inBrowser]
);
};
const SSRChecker = props => {
let { isBrowser, isServer } = useSSR();
return <p>{isBrowser ? 'Running on browser' : 'Running on server'}</p>;
};
ReactDOM.render(<SSRChecker />, document.getElementById('root'));
React, Hooks
Tracks the browser's location search param.
React, Hooks
Tracks the browser's location hash value, and allows changing it.
React, Hooks
Tracks the dimensions of the browser window.