Access Browser Navigator Properties in React

A Single React Module to Access Browser Navigator Properties

This package serves as the React implementation of the Navigator interface (windows.navigator). Among other things, the Navigator interface allows us to get useful information out of the browser such as network connection (onLine) and the geographic coordinates of the browser (geoLocation).

Properties you can use

• Is there internet connection?
•  What's the location of the user?
• What language(s) the user's computer support?
• What kind computer does the user use?

LIVE DEMO

Follow the white rabbit: https://react-browser-navigator.netlify.app/

GIF

Installation

npm install react-browser-navigator

Usage

Quick Example

// 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>
  );
}

Property Based Examples

The following examples are giving ideas how the module can be used. Note: for some examples we use lodash's isNull.

networkStatus

Implements Navigator.onLine.

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

function App() {
  // importing the property
  let { networkStatus } = useNavigator();

  // using the property as a state within the render
  return (
    <div>
      {networkStatus === true ? (
        <span>We are online!</span>
      ) : (
        <span>We are offline!</span>
      )}
    </div>
  );
}

geoLocation

Implements Navigator.getCurrentPosition. You can use the entire object, but for the sake of simplicity we just show the latitude and longitude here!

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

function App() {
  // importing the property
  let { getCurrentPosition } = useNavigator();

  // you can use it within the useEffect hook OR simply print the
  // string into the return statement
  useEffect(() => {
    if (!isNull(getCurrentPosition)) {
      console.log("getCurrentPosition", getCurrentPosition);
    }
  }, [getCurrentPosition]);

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

language

Implements Navigator.language. The preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown. This gives back a simple string.

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

function App() {
  // importing the property
  let { language } = useNavigator();

  // you can use it within the useEffect hook OR simply print the
  // string into the return statement
  useEffect(() => {
    if (!isNull(language)) {
      console.log("language", language);
    }
  }, [language]);

  return (
    <div>
      <span>Language:</span> {language}
    </div>
  );
}

languages

Implements Navigator.languages. Languages known to the user, by order of preference. This gives back an array of strings.

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

function App() {
  // importing the property
  let { languages } = useNavigator();

  // you can use it within the useEffect hook OR simply print the
  // string into the return statement
  useEffect(() => {
    if (!isNull(languages)) {
      console.log("languages", languages);
    }
  }, [language]);

  return (
    <div>
      <span>Languages:</span> {languages}
    </div>
  );
}

userAgent

Implements Navigator.userAgent. User agent information (a string) for the current browser.

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

function App() {
  // importing the property
  let { userAgent } = useNavigator();

  // you can use it within the useEffect hook OR simply print the
  // string into the return statement
  useEffect(() => {
    if (!isNull(userAgent)) {
      console.log("userAgent", userAgent);
    }
  }, [userAgent]);

  return (
    <div>
      <span>userAgent:</span> {userAgent}
    </div>
  );
}

userAgentData

Implements Navigator.userAgentData. Gives access to information about the browser and operating system of the user. This gives an object.

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

function App() {
  // importing the property
  let { userAgentData } = useNavigator();

  // you can use it within the useEffect hook OR simply print the
  // string into the return statement
  useEffect(() => {
    if (!isNull(userAgentData)) {
      console.log("userAgentData", userAgentData);
    }
  }, [userAgentData]);

  return (
    <div>
      <span>userAgentData:</span> {userAgentData}
    </div>
  );
}

vendor

Implements Navigator.vendor. Always either "Google Inc.", "Apple Computer, Inc.", or (in Firefox) the empty string. This gives back a string.

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

function App() {
  // importing the property
  let { vendor } = useNavigator();

  // you can use it within the useEffect hook OR simply print the
  // string into the return statement
  useEffect(() => {
    if (!isNull(vendor)) {
      console.log("vendor", vendor);
    }
  }, [vendor]);

  return (
    <div>
      <span>vendor:</span> {vendor}
    </div>
  );
}

Already Mapped Properties

Roadmap

We are planning to add more and more properties as well as other features.

All Properties

Additional Features

Credits

Special thanks to:

• MDN Navigator - the Navigator represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

View on Github: https://github.com/lineceptorg/react-browser-navigator 

#react #javascript