use-browser

The hook returns an array initialized with null, and populated with the window and document objects if they are present.

This is a useful hook if you have code that runs both on server and client sides and need to execute something that depends on the window or document objects. Instead of checking if the objects are defined and each of their keys are present (common on server side rendering where the window and document are undefined), you can just expect either null or the full window and document objects.

import { Text, useBrowser } from '@flixbus/honeycomb-react';

const [win, doc] = useBrowser();

const userAgent = win && win.navigator.userAgent;
const { clientWidth, clientHeight } = doc ? doc.body : {};
const href = doc && doc.location.href;

<>
  <Text>Your user agent: {userAgent}</Text>
  <Text>Body size: {clientWidth}x{clientHeight}</Text>
  <Text>URL: {href}</Text>
</>