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

https://i.imgur.com/HbGVRcM.gif

dev.to Article:

Read a short introduction about this new react-browser-navigator module:
https://dev.to/linecept/access-to-location-network-status-and-other-browser-provided-properties-in-react-24fn

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.

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

Status Property Note Type Example
networkStatus Detects if browser is offline or online. Boolean
getCurrentPosition Geolocation of browser. Object (GeolocationPosition including coords and timestamp)
language The preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown. String or null
languages Languages known to the user, by order of preference. Array of String
userAgent User agent string for the current browser. String
userAgentData Gives access to information about the browser and operating system of the user. Object
vendor Always either “Google Inc.”, “Apple Computer, Inc.”, or (in Firefox) the empty string. String

Roadmap

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

All Properties

No. Status Property Notes Source
1 connection Provides a NetworkInformation object containing information about the network connection of a device. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection
2 cookieEnabled Returns false if setting a cookie will be ignored and true otherwise. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/cookieEnabled
3 presentation Returns a reference to the Presentation API. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/presentation
4 serviceWorker Provides access to registration, removal, upgrade, and communication for associated documents. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/serviceWorker
5 storage Returns the StorageManager object used for estimating available storage. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/storage
6 webdriver Indicates whether the user agent is controlled by automation. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/webdriver
7 doNotTrack Reports the value of the user’s do-not-track preference. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/doNotTrack
8 oscpu Returns a string that represents the current operating system. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/oscpu
9 plugins Returns a PluginArray listing the plugins installed in the browser. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/plugins
10 setAppBadge() Sets a badge on the icon associated with this app and returns a Promise that resolves with undefined. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/setAppBadge
11 share() Invokes the native sharing mechanism of the current platform. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
12 vibrate() Causes vibration on devices with support for it. Does nothing if vibration support isn’t available. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate
13 getUserMedia() After permission, returns the audio or video stream associated to a camera or microphone. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia

Additional Features

Status Item Notes
Partially Done Examples Examples for already addded properties.
Adding Tests Test Coverage Creating and adding test cases.
Moving To Typescript Moving the codebase to TypeScript.

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.

Support the Authors

Do you like this project? Star the repository, spread the word – it really helps. You may want to follow
me on Twitter.

License

MIT License

Copyright (c) 2022 Linecept, David Kutas, Akos Toth.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

GitHub

View Github