Access to Location, Network Status and other Browser Provided Properties in React

Linecept — Thu, 03 Feb 2022 04:36:05 +0000

Browsers are becoming more and more powerful. Nowadays, browser can provide information about your network status (either you are online or offline), your location (geographic coordinates) among a million other things. Perhaps, the most intriguing thing is that you can even access the haptic engine in your device through your browser.

But how do we leverage this power?

Well, Navigator interface (windows.navigator) provides an API to do so!

However, it is good to take advantage what React has to offer, namely hooks!

Here is an example how you would access the location with the react-browser-navigator NPM package after installing the the package with npm install react-browser-navigator:

// import the module
import useNavigator from "react-browser-navigator";

function App() {
  // accessible properties
  let { getCurrentPosition } = useNavigator();

  // getCurrentPosition
  useEffect(() => {
    if (!isNull(getCurrentPosition)) {
      // printing out the entire object
      console.log("getCurrentPosition", getCurrentPosition);
    }
  }, [getCurrentPosition]);

  return (
    <div>
      <span>Latidude:</span> {getCurrentPosition?.coords.latitude}
      <br />
      <br />
      <span>Longitude:</span> {getCurrentPosition?.coords.longitude}
    </div>
  );
}

There are lots of other properties that you can access. For instance, are you onLine or not?!

// import the module
import useNavigator from "react-browser-navigator";

function App() {
  // list accessible navigator properties (find them all below in a table)
  let { networkStatus } = useNavigator();

  return (
    <div>
      {networkStatus === true ? (
        <span>We are online!</span>
      ) : (
        <span>We are offline!</span>
      )}
    </div>
  );
}

Head over to the package's page to see more.

There is also an extended roadmap to add more properties.

DEV Community: Linecept

Access to Location, Network Status and other Browser Provided Properties in React