react-browser-navigator

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?

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. 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

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.