├── .gitignore ├── package.json ├── src └── index.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | react-browser-navigator-online-geolocation.gif 2 | dist 3 | package-lock.json 4 | yarn.lock 5 | .DS_Store 6 | .cache 7 | *.log 8 | node_modules -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-browser-navigator", 3 | "description": "A single react module to access browser navigator properties.", 4 | "license": "MIT", 5 | "author": "Linecept David Kutas , Akos Toth ", 6 | "homepage": "https://react-browser-navigator.netlify.app/", 7 | "repository": { 8 | "url": "https://github.com/lineceptorg/react-browser-navigator", 9 | "type": "git" 10 | }, 11 | "version": "1.5.7", 12 | "main": "src/index.js", 13 | "files": [ 14 | "src" 15 | ], 16 | "typings": "dist/index.d.ts", 17 | "peerDependencies": { 18 | "react": ">=16.8 - 17.x", 19 | "react-dom": ">=16.8 - 17.x" 20 | }, 21 | "devDependencies": { 22 | "react": "17.0.38", 23 | "react-dom": "17.0.11" 24 | }, 25 | "keywords": [ 26 | "browser", 27 | "navigator", 28 | "window.navigator", 29 | "hooks", 30 | "useNavigator", 31 | "onLine", 32 | "offLine", 33 | "language", 34 | "languages", 35 | "geoLocation", 36 | "getCurrentPosition", 37 | "vendor", 38 | "userAgent", 39 | "userAgentData", 40 | "connection", 41 | "cookieEnabled", 42 | "react", 43 | "react-hooks" 44 | ], 45 | "publishConfig": { 46 | "access": "public" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | 3 | // # UseNavigator is a hook that implements browser navigator interface functions 4 | // The Navigator interface represents the state and the identity of the user agent. It allows scripts to 5 | // query it and to register themselves to carry on some activities. 6 | // MDN: https://developer.mozilla.org/en-US/docs/Web/API/Navigator 7 | function useNavigator() { 8 | // # onLine - used as netWorkStatus 9 | // Returns the online status of the browser. The property returns a boolean value, with true meaning online and false meaning offline. 10 | const getNetworkStatus = () => 11 | typeof navigator !== "undefined" && typeof navigator.onLine === "boolean" 12 | ? navigator.onLine 13 | : true; 14 | const [networkStatus, setNetworkStatus] = useState(getNetworkStatus()); 15 | 16 | const setNetworkOnlineFunction = () => setNetworkStatus(true); 17 | const setNetworkOfflineFunction = () => setNetworkStatus(false); 18 | 19 | useEffect(() => { 20 | window.addEventListener("online", setNetworkOnlineFunction); 21 | window.addEventListener("offline", setNetworkOfflineFunction); 22 | 23 | return () => { 24 | window.removeEventListener("online", setNetworkOnlineFunction); 25 | window.removeEventListener("offline", setNetworkOfflineFunction); 26 | }; 27 | }, []); 28 | 29 | // # geolocation - GPS position 30 | // Read-only property returns a Geolocation object that gives Web content access to the location of the device. 31 | // This allows a Web site or app to offer customized results based on the user's location. 32 | const [geoLocationStatus, setGeoLocationStatus] = useState(null); 33 | 34 | useEffect(() => { 35 | navigator.geolocation.getCurrentPosition((pos) => { 36 | setGeoLocationStatus(pos); 37 | }); 38 | }, [setGeoLocationStatus]); 39 | let getCurrentPosition = geoLocationStatus; 40 | 41 | // # lang 42 | // Returns a DOMString representing the preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown. 43 | const [langStatus, setLangStatus] = useState(null); 44 | 45 | useEffect(() => { 46 | setLangStatus(navigator.language); 47 | }, [setLangStatus]); 48 | let language = langStatus; 49 | 50 | // # langs 51 | // Returns an array of DOMString representing the languages known to the user, by order of preference. 52 | const [langsStatus, setLangsStatus] = useState(null); 53 | 54 | useEffect(() => { 55 | setLangsStatus(navigator.languages); 56 | }, [setLangsStatus]); 57 | 58 | let languages = langsStatus; 59 | 60 | //# userAgent 61 | //Read-only property returns the user agent string for the current browser. 62 | const [userAgentStatus, setUserAgentStatus] = useState(null); 63 | 64 | useEffect(() => { 65 | setUserAgentStatus(navigator.userAgent); 66 | }, [setUserAgentStatus]); 67 | let userAgent = userAgentStatus; 68 | 69 | //# userAgentData 70 | //The userAgentData read-only property, can be used to access the User-Agent Client Hints API. 71 | const [userAgentDataStatus, setUserAgentDataStatus] = useState(null); 72 | 73 | useEffect(() => { 74 | setUserAgentDataStatus(navigator.userAgentData); 75 | }, [setUserAgentDataStatus]); 76 | let userAgentData = userAgentDataStatus; 77 | 78 | //# vendor 79 | //The value of the Navigator vendor property is always either "Google Inc.", "Apple Computer, Inc.", or (in Firefox) the empty string. 80 | const [userVendor, setUserVendor] = useState(null); 81 | 82 | useEffect(() => { 83 | setUserVendor(navigator.vendor); 84 | }, [setUserVendor]); 85 | let vendor = userVendor; 86 | 87 | // !------ further properties from the navigator to be added thru PRs. 88 | 89 | return { 90 | networkStatus, 91 | getCurrentPosition, 92 | language, 93 | languages, 94 | userAgent, 95 | userAgentData, 96 | vendor, 97 | }; 98 | } 99 | 100 | export default useNavigator; 101 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # A Single React Module to Access Browser Navigator Properties 2 | 3 | This package serves as the React implementation of the [Navigator interface](https://developer.mozilla.org/en-US/docs/Web/API/Navigator) (`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`). 4 | 5 | ### Properties you can use 6 | 7 | 🔌 **Is there internet connection?** 8 | 🌎 **What's the location of the user?** 9 | 🗣️ **What language(s) the user's computer support?** 10 | 💻 **What kind computer does the user use?** 11 | 12 | ## LIVE DEMO 13 | 14 | Follow the white rabbit: 15 | 16 | ## GIF 17 | 18 | ![https://i.imgur.com/HbGVRcM.gif](https://i.imgur.com/HbGVRcM.gif) 19 | 20 | ## dev.to Article 21 | 22 | Read a short introduction about this new react-browser-navigator module: 23 | 24 | 25 | # Installation 26 | 27 | ``` 28 | npm install react-browser-navigator 29 | ``` 30 | 31 | # Usage 32 | 33 | ## Quick Example 34 | 35 | ```js 36 | // import the module 37 | import useNavigator from "react-browser-navigator"; 38 | 39 | function App() { 40 | // list accessible navigator properties (find them all below in a table) 41 | let { networkStatus } = useNavigator(); 42 | 43 | return ( 44 |
45 | {networkStatus === true ? ( 46 | We are online! 47 | ) : ( 48 | We are offline! 49 | )} 50 |
51 | ); 52 | } 53 | ``` 54 | 55 | ## Property Based Examples 56 | 57 | The following examples are giving ideas how the module can be used. Note: for some examples we use [lodash](https://www.npmjs.com/package/lodash)'s `isNull`. 58 | 59 | ### networkStatus 60 | 61 | Implements `Navigator.onLine`. 62 | 63 | ```js 64 | // import the module 65 | import useNavigator from "react-browser-navigator"; 66 | 67 | function App() { 68 | // importing the property 69 | let { networkStatus } = useNavigator(); 70 | 71 | // using the property as a state within the render 72 | return ( 73 |
74 | {networkStatus === true ? ( 75 | We are online! 76 | ) : ( 77 | We are offline! 78 | )} 79 |
80 | ); 81 | } 82 | ``` 83 | 84 | ### geoLocation 85 | 86 | Implements `Navigator.getCurrentPosition`. You can use the entire object, but for the sake of simplicity we just show the latitude and longitude here! 87 | 88 | ```js 89 | // import the module 90 | import useNavigator from "react-browser-navigator"; 91 | 92 | function App() { 93 | // importing the property 94 | let { getCurrentPosition } = useNavigator(); 95 | 96 | // you can use it within the useEffect hook OR simply print the 97 | // string into the return statement 98 | useEffect(() => { 99 | if (!isNull(getCurrentPosition)) { 100 | console.log("getCurrentPosition", getCurrentPosition); 101 | } 102 | }, [getCurrentPosition]); 103 | 104 | return ( 105 |
106 | Latidude: {getCurrentPosition?.coords.latitude} 107 |
108 |
109 | Longitude: {getCurrentPosition?.coords.longitude} 110 |
111 | ); 112 | } 113 | ``` 114 | 115 | ### language 116 | 117 | 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. 118 | 119 | ```js 120 | // import the module 121 | import useNavigator from "react-browser-navigator"; 122 | 123 | function App() { 124 | // importing the property 125 | let { language } = useNavigator(); 126 | 127 | // you can use it within the useEffect hook OR simply print the 128 | // string into the return statement 129 | useEffect(() => { 130 | if (!isNull(language)) { 131 | console.log("language", language); 132 | } 133 | }, [language]); 134 | 135 | return ( 136 |
137 | Language: {language} 138 |
139 | ); 140 | } 141 | ``` 142 | 143 | ### languages 144 | 145 | Implements `Navigator.languages`. Languages known to the user, by order of preference. This gives back an array of strings. 146 | 147 | ```js 148 | // import the module 149 | import useNavigator from "react-browser-navigator"; 150 | 151 | function App() { 152 | // importing the property 153 | let { languages } = useNavigator(); 154 | 155 | // you can use it within the useEffect hook OR simply print the 156 | // string into the return statement 157 | useEffect(() => { 158 | if (!isNull(languages)) { 159 | console.log("languages", languages); 160 | } 161 | }, [language]); 162 | 163 | return ( 164 |
165 | Languages: {languages} 166 |
167 | ); 168 | } 169 | ``` 170 | 171 | ### userAgent 172 | 173 | Implements `Navigator.userAgent`. User agent information (a string) for the current browser. 174 | 175 | ```js 176 | // import the module 177 | import useNavigator from "react-browser-navigator"; 178 | 179 | function App() { 180 | // importing the property 181 | let { userAgent } = useNavigator(); 182 | 183 | // you can use it within the useEffect hook OR simply print the 184 | // string into the return statement 185 | useEffect(() => { 186 | if (!isNull(userAgent)) { 187 | console.log("userAgent", userAgent); 188 | } 189 | }, [userAgent]); 190 | 191 | return ( 192 |
193 | userAgent: {userAgent} 194 |
195 | ); 196 | } 197 | ``` 198 | 199 | ### userAgentData 200 | 201 | Implements `Navigator.userAgentData`. Gives access to information about the browser and operating system of the user. This gives an object. 202 | 203 | ```js 204 | // import the module 205 | import useNavigator from "react-browser-navigator"; 206 | 207 | function App() { 208 | // importing the property 209 | let { userAgentData } = useNavigator(); 210 | 211 | // you can use it within the useEffect hook OR simply print the 212 | // string into the return statement 213 | useEffect(() => { 214 | if (!isNull(userAgentData)) { 215 | console.log("userAgentData", userAgentData); 216 | } 217 | }, [userAgentData]); 218 | 219 | return ( 220 |
221 | userAgentData: {userAgentData} 222 |
223 | ); 224 | } 225 | ``` 226 | 227 | ### vendor 228 | 229 | Implements `Navigator.vendor`. Always either "Google Inc.", "Apple Computer, Inc.", or (in Firefox) the empty string. This gives back a string. 230 | 231 | ```js 232 | // import the module 233 | import useNavigator from "react-browser-navigator"; 234 | 235 | function App() { 236 | // importing the property 237 | let { vendor } = useNavigator(); 238 | 239 | // you can use it within the useEffect hook OR simply print the 240 | // string into the return statement 241 | useEffect(() => { 242 | if (!isNull(vendor)) { 243 | console.log("vendor", vendor); 244 | } 245 | }, [vendor]); 246 | 247 | return ( 248 |
249 | vendor: {vendor} 250 |
251 | ); 252 | } 253 | ``` 254 | 255 | # Already Mapped Properties 256 | 257 | | Status | **Property** | Note | Type | Example | 258 | | :----: | :------------------: | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------: | :-----: | 259 | | ✅ | `networkStatus` | Detects if browser is offline or online. | Boolean | ✅ | 260 | | ✅ | `getCurrentPosition` | Geolocation of browser. | Object (`GeolocationPosition` including `coords` and `timestamp`) | ✅ | 261 | | ✅ | `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` | ✅ | 262 | | ✅ | `languages` | Languages known to the user, by order of preference. | Array of String | ✅ | 263 | | ✅ | `userAgent` | User agent string for the current browser. | String | ✅ | 264 | | ✅ | `userAgentData` | Gives access to information about the browser and operating system of the user. | Object | ✅ | 265 | | ✅ | `vendor` | Always either "Google Inc.", "Apple Computer, Inc.", or (in Firefox) the empty string. | String | ✅ | 266 | 267 | # Roadmap 268 | 269 | We are planning to add more and more properties as well as other features. 270 | 271 | ## All Properties 272 | 273 | | **No.** | **Status** | **Property** | **Notes** | **Source** | 274 | | :-----: | :--------: | :--------------: | :---------------------------------------------------------------------------------------------------: | -------------------------------------------------------------------------- | 275 | | 1 | ❌ | `connection` | Provides a NetworkInformation object containing information about the network connection of a device. | | 276 | | 2 | ❌ | `cookieEnabled` | Returns false if setting a cookie will be ignored and true otherwise. | | 277 | | 3 | ❌ | `presentation` | Returns a reference to the Presentation API. | | 278 | | 4 | ❌ | `serviceWorker` | Provides access to registration, removal, upgrade, and communication for associated documents. | | 279 | | 5 | ❌ | `storage` | Returns the StorageManager object used for estimating available storage. | | 280 | | 6 | ❌ | `webdriver` | Indicates whether the user agent is controlled by automation. | | 281 | | 7 | ❌ | `doNotTrack` | Reports the value of the user's do-not-track preference. | | 282 | | 8 | ❌ | `oscpu` | Returns a string that represents the current operating system. | | 283 | | 9 | ❌ | `plugins` | Returns a PluginArray listing the plugins installed in the browser. | | 284 | | 10 | ❌ | `setAppBadge()` | Sets a badge on the icon associated with this app and returns a Promise that resolves with undefined. | | 285 | | 11 | ❌ | `share()` | Invokes the native sharing mechanism of the current platform. | | 286 | | 12 | ❌ | `vibrate()` | Causes vibration on devices with support for it. Does nothing if vibration support isn't available. | | 287 | | 13 | ❌ | `getUserMedia()` | After permission, returns the audio or video stream associated to a camera or microphone. | | 288 | 289 | ## Additional Features 290 | 291 | | **Status** | **Item** | **Notes** | 292 | | :------------: | :------------------: | :-------------------------------------------: | 293 | | Partially Done | Examples | Examples for already addded properties. | 294 | | ❌ | Adding Tests | Test Coverage Creating and adding test cases. | 295 | | ❌ | Moving To Typescript | Moving the codebase to TypeScript. | 296 | 297 | ## Credits 298 | 299 | Special thanks to: 300 | 301 | - [MDN Navigator](https://developer.mozilla.org/en-US/docs/Web/API/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. 302 | 303 | ## Support the Authors 304 | 305 | Do you like this project? Star the repository, spread the word - it really helps. You may want to follow 306 | me on [Twitter](https://twitter.com/davidtkutas). 307 | 308 | # License 309 | 310 | MIT License 311 | 312 | Copyright (c) 2022 Linecept, David Kutas, Akos Toth. 313 | 314 | 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: 315 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 316 | 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. 317 | --------------------------------------------------------------------------------