How to check if the user has internet connection in React

Question

I need to condition which function will be called based on internet connection in a React App, for example:

if (connected) {
   call function Y()
} else if (!connected) {
   call function X()
}

How could I do that? I've tried it with NetInfo and with navigator.online, but I couldn't make it work.

Aren't you looking for something, like [this](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine)? — Yevhen Horbunkov, Jul 16 '20 at 21:01
As I said, I tried this, but when I console both `navigator.online` and `window.navigator.online` I get `undefined` — Berg_Durden, Jul 16 '20 at 21:03
Just to make sure, didn't you mess with casing (i.e. it has to be `onLine`, not `online`) — Yevhen Horbunkov, Jul 16 '20 at 21:07
You're correct, I did messed up with it. It works now. Thank you very much — Berg_Durden, Jul 16 '20 at 21:28

Rohan Agarwal · Accepted Answer · 2020-07-16T21:09:59.177

From the MDN docs on navigator.onLine:

If the browser doesn't support navigator.onLine it will always come out as false/undefined.

To see changes in the network state, use addEventListener to listen for the events on window.online and window.offline, as in the following example:
window.addEventListener('offline', function(e) {
console.log('offline'); });

window.addEventListener('online', function(e) { console.log('online');
});

score 1 · Answer 2 · answered Jul 16 '20 at 21:22

Browsers implement navigator.online property differently.

In Chrome and Safari, if the browser is not able to connect to a local area network (LAN) or a router, it is offline; all other conditions return true.

In Firefox and Internet Explorer, switching the browser to offline mode sends a false value. Until Firefox 41, all other conditions return a true value; testing actual behavior on Nightly 68 on Windows shows that it only looks for LAN connection like Chrome and Safari giving false positives.

I Would suggest listening to the online event and if you get True then to double sure make an ajax request to any public domain like google or your own

[Based On][1] [1]: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine

How to check if the user has internet connection in React

2 Answers2