Added 📴 useOfflineStatus (#41)

README.md

@@ -54,6 +54,7 @@ yarn add use-custom-hooks
 - [useGeoLocation](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usegeolocation)
 - [useLocalStorage](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-uselocalstorage)
 - [useMousePosition](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-usemouseposition)
+- [useOfflineStatus](https://github.com/aromalanil/useCustomHooks/tree/master/docs#-useofflinestatus)
 
 ## 📄 Documentation
 For documentation, examples and other details refer [Documentation](https://github.com/aromalanil/useCustomHooks/tree/master/docs)

docs/README.md

@@ -12,6 +12,7 @@
 - [useMousePosition](#-usemouseposition)
 - [useGeoLocation](#-usegeolocation)
 - [usePrevious](#-useprevious)
+- [useOfflineStatus](#-useofflinestatus)
 
 </br>
 
@@ -409,6 +410,33 @@ function App() {
 
 </br>
 
+## 📴 useOfflineStatus
+
+Returns a boolean state which represents if the device is offline
+
+### Usage
+
+```jsx
+import React from "react";
+import { useOfflineStatus } from "use-custom-hooks";
+
+const LocalValue = () => {
+  const isDeviceOffline = useOfflineStatus();
+
+  return <p>Device is currently {isDeviceOffline ? "Offline" : "Online"}</p>;
+};
+```
+
+### Parameters
+
+None : This hooks takes no parameters.
+
+### Return value
+
+`isDeviceOffline` (_boolean_) : A state representing if device is offline.
+
+</br>
+
 
 # Contribution Guidelines
 

hooks/useOfflineStatus.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+/**
+ *
+ * Custom hook to know the current status of the device (online/offline).
+ *
+ * @return {Boolean} If the device is offline or not
+ */
+const useOfflineStatus = () => {
+  const [isDeviceOffline, setDeviceOffline] = useState(false);
+
+  useEffect(() => {
+    const networkStatusListener = () => {
+      setDeviceOffline(!navigator.onLine);
+    };
+
+    window.addEventListener('online', networkStatusListener);
+    window.addEventListener('offline', networkStatusListener);
+
+    return () => {
+      window.removeEventListener('online', networkStatusListener);
+      window.removeEventListener('offline', networkStatusListener);
+    };
+  }, []);
+
+  return isDeviceOffline;
+};
+
+export default useOfflineStatus;

index.js

@@ -8,3 +8,4 @@ export { default as useDebounce } from './hooks/useDebounce';
 export { default as useGeoLocation } from './hooks/useGeoLocation';
 export { default as useLocalStorage } from './hooks/useLocalStorage';
 export { default as useMousePosition } from './hooks/useMousePosition';
+export { default as useOfflineStatus } from './hooks/useOfflineStatus';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-custom-hooks",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "A collection of Custom Hooks for React.",
   "main": "index.js",
   "scripts": {