From efc3242cd5223ff662016b365d3fbd4f68a08d89 Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Mon, 12 Apr 2021 21:12:53 +0200
Subject: [PATCH] Add useOnLine

---
 README.md             | 13 +++++++++++++
 src/index.js          |  2 ++
 src/index.spec.js     |  5 +++++
 src/useOnLine.js      | 24 ++++++++++++++++++++++++
 src/useOnLine.spec.js | 11 +++++++++++
 5 files changed, 55 insertions(+)
 create mode 100644 src/useOnLine.js
 create mode 100644 src/useOnLine.spec.js

diff --git a/README.md b/README.md
index e08b426..4ecbaaf 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@ A collection of React Hooks.
 * [`useIntersectionObserver`](#useIntersectionObserver)
 * [`useMatchMedia`](#useMatchMedia)
 * [`useMutationObserver`](#useMutationObserver)
+* ['useOnLine'](#useOnLine)
 * [`useResizeObserver`](#useResizeObserver)
 * [`useScrollLeft`](#useScrollLeft)
 * [`useScrollTop`](#useScrollTop)
@@ -90,6 +91,18 @@ import { useMutationObserver } from '@wojtekmaj/react-hooks';
 useMutationObserver(element, config, onMutation);
 ```
 
+### `useOnLine`
+
+Returns the online status of the browser.
+
+#### Sample usage
+
+```js
+import { useOnLine } from '@wojtekmaj/react-hooks';
+
+const offLine = useOnLine(); // true
+```
+
 ### `useResizeObserver`
 
 Observes a given element using [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
diff --git a/src/index.js b/src/index.js
index b43b27f..a1accd7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,7 @@ import useEventListener from './useEventListener';
 import useIntersectionObserver from './useIntersectionObserver';
 import useMatchMedia from './useMatchMedia';
 import useMutationObserver from './useMutationObserver';
+import useOnLine from './useOnLine';
 import useResizeObserver from './useResizeObserver';
 import useScrollLeft from './useScrollLeft';
 import useScrollTop from './useScrollTop';
@@ -19,6 +20,7 @@ export {
   useIntersectionObserver,
   useMatchMedia,
   useMutationObserver,
+  useOnLine,
   useResizeObserver,
   useScrollLeft,
   useScrollTop,
diff --git a/src/index.spec.js b/src/index.spec.js
index 43ba7d3..82ecb50 100644
--- a/src/index.spec.js
+++ b/src/index.spec.js
@@ -4,6 +4,7 @@ import {
   useIntersectionObserver,
   useMatchMedia,
   useMutationObserver,
+  useOnLine,
   useResizeObserver,
   useScrollLeft,
   useScrollTop,
@@ -36,6 +37,10 @@ describe('index', () => {
     expect(useMutationObserver).toBeInstanceOf(Function);
   });
 
+  it('has useOnLine exported properly', () => {
+    expect(useOnLine).toBeInstanceOf(Function);
+  });
+
   it('has useResizeObserver exported properly', () => {
     expect(useResizeObserver).toBeInstanceOf(Function);
   });
diff --git a/src/useOnLine.js b/src/useOnLine.js
new file mode 100644
index 0000000..5f306e3
--- /dev/null
+++ b/src/useOnLine.js
@@ -0,0 +1,24 @@
+import { useCallback, useState } from 'react';
+import useEventListener from './useEventListener';
+
+/**
+ * Returns the online status of the browser.
+ *
+ * @returns {Boolean} Online status of the browser
+ */
+export default function useOnLine() {
+  const [onLine, setOnLine] = useState(window.navigator.onLine);
+
+  const handleOnline = useCallback(() => {
+    setOnLine(true);
+  }, []);
+
+  const handleOffline = useCallback(() => {
+    setOnLine(false);
+  }, []);
+
+  useEventListener(window, 'online', handleOnline);
+  useEventListener(window, 'offline', handleOffline);
+
+  return onLine;
+}
diff --git a/src/useOnLine.spec.js b/src/useOnLine.spec.js
new file mode 100644
index 0000000..2c23da3
--- /dev/null
+++ b/src/useOnLine.spec.js
@@ -0,0 +1,11 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import useOnLine from './useOnLine';
+
+describe('useOnLine()', () => {
+  it('returns current browser online status properly', () => {
+    const { result } = renderHook(() => useOnLine());
+
+    expect(result.current).toBe(true);
+  });
+});
-- 
2.54.0