Top React Hooks — Browser APIs

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.

@21kb/react-device-orientation-hook

The @21kb/react-device-orientation-hook lets us get the orientation and angle of the screen.

To use it, we install it by running:

npm install --save @21kb/react-device-orientation-hook

or:

yarn add @21kb/react-device-orientation-hook

Then we can use it by writing:

import React from "react";
import useOrientation from "@21kb/react-device-orientation-hook";

export default function App() {
  const state = useOrientation({
    angle: 0,
    type: "landscape-primary"
  });
  const { angle, type } = state;

  return (
    <div className="App">
      {angle} {type}
    </div>
  );
}

We set the default angle and orientation with the type property.

Then we can get that returned with the useOrientation hook.

@21kb/react-notification-hook

We can use the notification hook to show native notifications with our browser.

To install it, we run:

npm install --save @21kb/react-notification-hook

or:

yarn add @21kb/react-notification-hook

Then we can use it by writing:

import React from "react";
import useNotification from "@21kb/react-notification-hook";

export default function App() {
  const notify = useNotification({
    title: "hello world",
    options: {
      dir: "rtl"
    }
  });

  return <button onClick={notify()}>Notify me!</button>;
}

The useNotificatiin hook returns a function to let us display a notification.

The title has the title of the notification.

options include the dir for the direction.

@21kb/react-online-status-hook

The @21kb/react-online-status-hook package lets us get the online status of our app.

We can use the useOnlineStatus or useOfflineStatus hook to get the online status.

We install it with:

npm install --save @21kb/react-online-status-hook

Then we can use it by writing:

import React from "react";
import { useOnlineStatus } from "[@21kb/react-online-status-hook](http://twitter.com/21kb/react-online-status-hook "Twitter profile for @21kb/react-online-status-hook")";
export default function App() {
  const status = useOnlineStatus();

  return <div>You are currently {status ? "online" : "offline"}.</div>;
}

useOfflineStatus does the same thing.

For example, we can write:

import React from "react";
import { useOfflineStatus } from "@21kb/react-online-status-hook";
export default function App() {
  const status = useOfflineStatus();

  return <div>You are currently {status ? "online" : "offline"}.</div>;
}

@21kb/react-page-visible-hook

The @21kb/react-page-visible-hook package provides us with a hook for getting the page visibility status of our app.

To install it, we run:

npm install --save @21kb/react-page-visible-hook

or:

yarn add @21kb/react-page-visible-hook

to install it.

Then we can use it by writing:

import React from "react";
import useVisible from "@21kb/react-page-visible-hook";

export default function App() {
  const state = useVisible();
  const { visibilityState } = state;

  return <>{visibilityState}</>;
}

The useVisible hook returns the visibility state of our app.

The value can be 'visible' or 'prerender' .

@21kb/react-dom-status-hook

The @21kb/react-dom-status-hook package provides us with a hook to get the ready state of our app.

We can install it by running:

npm install --save @21kb/react-dom-status-hook

or:

yarn add @21kb/react-dom-status-hook

Then we can use the useDomStatus hook by writing:

import React from "react";
import useDomStatus from "@21kb/react-dom-status-hook";

export default function App() {
  const { readyState } = useDomStatus();

  return <div>{readyState}</div>;
}

It returns an object with the readyState property to get the DOM loading state.

Conclusion

We can use various hooks to use various browser APIs.