https://github.com/cansin/use-navigator-online

React Hooks to detect when your browser is online/offline.
https://github.com/cansin/use-navigator-online

navigator navigator-online offline react react-hooks

Last synced: about 2 months ago
JSON representation

React Hooks to detect when your browser is online/offline.

• Host: GitHub
• URL: https://github.com/cansin/use-navigator-online
• Owner: cansin
• License: mit
• Created: 2020-05-08T19:46:38.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-08T19:10:54.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T23:44:04.122Z (9 months ago)
• Topics: navigator, navigator-online, offline, react, react-hooks
• Language: JavaScript
• Size: 1.14 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# use-navigator-online

[![tests](https://github.com/cansin/use-navigator-online/actions/workflows/tests.yml/badge.svg)](https://github.com/cansin/use-navigator-online/actions/workflows/tests.yml)

[![codeql](https://github.com/cansin/use-navigator-online/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/cansin/use-navigator-online/actions/workflows/codeql-analysis.yml)

[![size](https://img.shields.io/bundlephobia/minzip/use-navigator-online)](https://bundlephobia.com/result?p=use-navigator-online)

[![dependencies](https://img.shields.io/librariesio/release/npm/use-navigator-online)](https://libraries.io/npm/use-navigator-online)

[![downloads](https://img.shields.io/npm/dm/use-navigator-online)](https://www.npmjs.com/package/use-navigator-online)

[![license](https://img.shields.io/github/license/cansin/use-navigator-online)](https://github.com/cansin/use-navigator-online/blob/master/LICENSE)

React Hooks to detect when your browser is online/offline using

[window.navigator.onLine](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine).

## Install

```bash

npm install use-navigator-online --save

```

## Basic Usage

Update or create `next.config.js` with

```js

import useNavigatorOnline from "use-navigator-online";

function Component() {

  const { isOnline, isOffline, backOnline, backOffline } = useNavigatorOnline();

  useEffect(() => {

    // Do something when network is back online.

  }, [backOnline]);

  useEffect(() => {

    // Do something when network goes offline.

  }, [backOffline]);

  return (

    


      {isOnline ? "online" : "not online"}{" "}

      {isOffline ? "offline" : "not offline"}

    

  );

}

```


### Available Return Values

- **isOnline:** boolean - `true` when online, `false` otherwise.

- **isOffline:** boolean - `true` when offline, `false` otherwise.

- **backOnline:** boolean - `true` when network status changes from offline to online,

  `false` otherwise.

- **backOffline:** boolean - `true` when network status changes from online to offline,

  `false` otherwise.