Initial code for useNavigatorOnline.

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}

.eslintrc.js

@@ -0,0 +1,41 @@
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:import/errors",
+    "prettier/react",
+  ],
+  overrides: [
+    {
+      files: ["test.js"],
+      env: { jest: true },
+    },
+  ],
+  parser: "babel-eslint",
+  parserOptions: {
+    ecmaVersion: 8,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+      modules: true,
+    },
+  },
+  plugins: ["react-hooks"],
+  rules: {
+    "import/order": ["error", { "newlines-between": "always" }],
+    "react/jsx-filename-extension": [1, { extensions: [".js"] }],
+    "react/jsx-props-no-spreading": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};

.gitignore

@@ -0,0 +1,3 @@
+.idea/
+node_modules/
+yarn-error.log

.npmignore

@@ -0,0 +1,9 @@
+.idea/
+node_modules/
+test.js
+.babelrc
+.eslintrc.js
+.gitignore
+.travis.yml
+yarn.lock
+yarn-error.log

.travis.yml

@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - 12.16.3

README.md

@@ -1,2 +1,48 @@
 # use-navigator-online
-React Hooks to detect when your browser is online/offline.
+
+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).
+
+![size](https://img.shields.io/bundlephobia/minzip/use-navigator-online.svg) ![dependencies](https://img.shields.io/david/cansin/use-navigator-online.svg) ![build](https://img.shields.io/travis/com/cansin/use-navigator-online) ![downloads](https://img.shields.io/npm/dt/use-navigator-online) ![license](https://img.shields.io/npm/l/use-navigator-online.svg)
+
+## Install
+
+```bash
+yarn add use-navigator-online
+```
+
+## 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 (
+    <p>
+      {isOnline ? "online" : "not online"}{" "}
+      {isOffline ? "offline" : "not offline"}
+    </p>
+  );
+}
+```
+
+### 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.

index.js

@@ -0,0 +1,41 @@
+import { useState, useEffect } from "react";
+
+export default function useNavigatorOnline() {
+  const supported =
+    typeof window !== "undefined" &&
+    typeof navigator !== "undefined" &&
+    "onLine" in navigator;
+
+  const [isOnline, setIsOnline] = useState({
+    previous: supported ? navigator.onLine : false,
+    current: supported ? navigator.onLine : false,
+  });
+
+  useEffect(() => {
+    if (supported) {
+      const updateStatus = (event) => {
+        setIsOnline({
+          previous: isOnline.current,
+          current: event.type === "online",
+        });
+      };
+
+      window.addEventListener("offline", updateStatus);
+      window.addEventListener("online", updateStatus);
+
+      return () => {
+        window.removeEventListener("offline", updateStatus);
+        window.removeEventListener("online", updateStatus);
+      };
+    }
+
+    return () => {};
+  }, [isOnline, supported]);
+
+  return {
+    backOnline: !isOnline.previous && isOnline.current,
+    backOffline: isOnline.previous && !isOnline.current,
+    isOnline: isOnline.current,
+    isOffline: !isOnline.current,
+  };
+}

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "use-navigator-online",
+  "version": "0.0.1",
+  "description": "React Hooks to detect when your browser is online/offline.",
+  "main": "index.js",
+  "private": false,
+  "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-react": "^7.9.4",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
+    "jest": "^26.0.1",
+    "prettier": "^2.0.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cansin/use-navigator-online.git"
+  },
+  "keywords": [
+    "navigator",
+    "window.navigator",
+    "react",
+    "react-hooks"
+  ],
+  "author": {
+    "name": "Cansin Yildiz",
+    "email": "cansinyildiz@gmail.com",
+    "url": "https://www.cansinyildiz.com/"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cansin/use-navigator-online/issues"
+  },
+  "homepage": "https://github.com/cansin/use-navigator-online#readme",
+  "scripts": {
+    "test": "eslint . && jest"
+  }
+}

test.js

@@ -0,0 +1,39 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { act } from "react-dom/test-utils";
+
+import useNavigatorOnline from "./index";
+
+function NavigatorTest() {
+  const { isOnline, isOffline } = useNavigatorOnline();
+
+  return (
+    <p>
+      {isOnline ? "online" : "not online"}{" "}
+      {isOffline ? "offline" : "not offline"}
+    </p>
+  );
+}
+
+describe("useNavigatorOnline", () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it("can hooked", () => {
+    act(() => {
+      ReactDOM.render(<NavigatorTest />, container);
+    });
+
+    const result = container.querySelector("p");
+    expect(result.textContent).toBe("online not offline");
+  });
+});