Top React Hooks — Network, Long Press, and Scrolling

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.

react-use

The react-use library is a big library with many handy hooks.

The useNetwork hook lets us detect the network type.

To us it, we can write:

import React from "react";
import { useNetwork } from "react-use";

export default function App() {
  const state = useNetwork();

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
}

We call the useNetwork hook to return the network state.

The returned object has the online , downlink , effectiveType and rtt properties.

online has the online status.

downlink has internet downlink.

effectiveType has the effective network type.

rtt has the round trip delay.

The useOrientation hook lets us track the screen orientation of the user’s device.

To use it, we write:

import React from "react";
import { useOrientation } from "react-use";

export default function App() {
  const state = useOrientation();

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
}

We use the useOrientation hook to return an object with the orientation data.

Then object has the angle , which is the angle of the screen.

It also has the type property, which is the screen orientation.

The usePageLeave hook lets us run a callback when the mouse leaves the page.

For instance, we can write:

import React from "react";
import { usePageLeave } from "react-use";

export default function App() {
  usePageLeave(() => console.log("left page"));

  return <></>;
}

The hook takes a callback that runs when our mouse leaves the page.

The useStartTyping hook lets us detect when we start typing.

It takes a callback that runs when we start typing.

For example, we can write:

import React from "react";
import { useStartTyping } from "react-use";

export default function App() {
  useStartTyping(() => console.log("Started typing"));

  return null;
}

The useWindowScroll hook lets us rerender on window scroll.

For example, we can write:

import React from "react";
import { useWindowScroll } from "react-use";

export default function App() {
  const { x, y } = useWindowScroll();

  return (
    <div>
      <div style={{ position: "fixed" }}>
        x: {x} y: {y}
      </div>
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p key={i}>{i}</p>
        ))}
    </div>
  );
}

We have the useWindowScroll hook that returns the x and y coordinates of the scrolling.

The useScroll hook lets us watch for the scrolling of an element.

To use it, we can write:

import React from "react";
import { useScroll } from "react-use";

export default function App() {
  const scrollRef = React.useRef(null);
  const { x, y } = useScroll(scrollRef);

  return (
    <div ref={scrollRef} style={{ overflow: "scroll", height: 300 }}>
      <div style={{ position: "fixed" }}>
        x: {x} y: {y}
      </div>
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p key={i}>{i}</p>
        ))}
    </div>
  );
}

We created a ref and pass that into the element that we want to watch the scrolling for.

We’ve to set the overflow style so that we scroll the element when there’s overflowing content.

Conclusion

The react-use package has hooks to listening to scrolling on the window and elements.

Also, we can watch for key presses.