Top React Hooks — Network, Dimensions, and Scroll

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

@rehooks/network-status

The @rehooks/network-status hook lets us get the network status in our React app.

To use it, we run:

yarn add @rehooks/network-status

Then we can use the useNetworkStatus hook to get the network information:

import React from "react";
import useNetworkStatus from "@rehooks/network-status";

export default function App() {
  const connection = useNetworkStatus();
  return (
    <div>
      <div>downlink: {connection.downlink}</div>
      <div>effectiveType: {connection.effectiveType}</div>
      <div>rtt: {connection.rtt}</div>
      <div>saveData: {connection.saveData ? "yes" : "no"}</div>
    </div>
  );
}

downlink has the upload speed.

effectiveType hs the connection type.

rtt is the round trip delay, which is the length of time it takes for a single to be sent plus the length of time it takes for the signal to be acknowledged.

@rehooks/online-status

@rehooks/online-status is a package to get the online status of an app.

It listens to online or offline events to get the status.

To install it, we can run:

yarn add @rehooks/online-status

Then we can use it by writing:

import React from "react";
import useOnlineStatus from "@rehooks/online-status";

export default function App() {
  const onlineStatus = useOnlineStatus();
  return (
    <div>
      <h1>{onlineStatus ? "Online" : "Offline"}</h1>
    </div>
  );
}

We can use the useOnlineStatus hook to get the online status of our app.

@rehooks/window-scroll-position

We can use the @rehooks/window-scroll-position hook to watch the scroll position in our app.

To install the package, we run:

yarn add @rehooks/window-scroll-position

Then we can use the package buy writing:

import React from "react";
import useWindowScrollPosition from "@rehooks/window-scroll-position";

export default function App() {
  const options = {
    throttle: 100
  };
  let position = useWindowScrollPosition(options);
  return (
    <>
      <div style={{ position: "fixed" }}>{JSON.stringify(position)}</div>
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
    </>
  );
}

We use the useWindowScrollPosition hook to watch for scroll position.

We also pass in an option to throttle the position watching.

Then when we scroll, we’ll see the x and y properties of position change.

@rehooks/window-size

We can use the @rehooks/window-size package to watch for window size changes.

To install it, we run:

yarn add @rehooks/window-size

Then we can use it by writing:

import React from "react";
import useWindowSize from "@rehooks/window-size";

export default function App() {
  let windowSize = useWindowSize();

  return (
    <>
      <div>{JSON.stringify(windowSize)}</div>
    </>
  );
}

We then use the useWindowSize hook to get the window dimensions.

innerHeight has the interior height with the horizontal scroll bar’s height in pixels.

innerWidth has the interior width of the window with the vertical scrollbar in pixels.

outerHeight has the height of the whole browser window in pixels.

outerHeight has the width of the whole browser window in pixels.

They both include sidebars and other borders.

Conclusion

We can get network status, scroll position, and window size with various hooks.