feature: Add useNetworkStatus hook to track user's network status

README.md

@@ -75,6 +75,7 @@ function Component() {
 - [`useLocalStorage`](https://usehooks-ts.com/react-hook/use-local-storage) — uses the [localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to persist state across page reloads.
 - [`useMap`](https://usehooks-ts.com/react-hook/use-map) — manages a key-value [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) state with setter actions.
 - [`useMediaQuery`](https://usehooks-ts.com/react-hook/use-media-query) — tracks the state of a media query using the [Match Media API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
+- [`useNetworkStatus`](https://usehooks-ts.com/react-hook/use-network-status) — Custom hook to tracks the user's network status.
 - [`useOnClickOutside`](https://usehooks-ts.com/react-hook/use-on-click-outside) — handles clicks outside a specified element.
 - [`useReadLocalStorage`](https://usehooks-ts.com/react-hook/use-read-local-storage) — reads a value from [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), closely related to [useLocalStorage()](https://usehooks-ts.com/react-hook/use-local-storage).
 - [`useResizeObserver`](https://usehooks-ts.com/react-hook/use-resize-observer) — observes the size of an element using the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).

packages/usehooks-ts/README.md

@@ -75,6 +75,7 @@ function Component() {
 - [`useLocalStorage`](https://usehooks-ts.com/react-hook/use-local-storage) — uses the [localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to persist state across page reloads.
 - [`useMap`](https://usehooks-ts.com/react-hook/use-map) — manages a key-value [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) state with setter actions.
 - [`useMediaQuery`](https://usehooks-ts.com/react-hook/use-media-query) — tracks the state of a media query using the [Match Media API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
+- [`useNetworkStatus`](https://usehooks-ts.com/react-hook/use-network-status) — Custom hook to tracks the user's network status.
 - [`useOnClickOutside`](https://usehooks-ts.com/react-hook/use-on-click-outside) — handles clicks outside a specified element.
 - [`useReadLocalStorage`](https://usehooks-ts.com/react-hook/use-read-local-storage) — reads a value from [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), closely related to [useLocalStorage()](https://usehooks-ts.com/react-hook/use-local-storage).
 - [`useResizeObserver`](https://usehooks-ts.com/react-hook/use-resize-observer) — observes the size of an element using the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).

packages/usehooks-ts/src/index.ts

@@ -18,6 +18,7 @@ export * from './useIsomorphicLayoutEffect'
 export * from './useLocalStorage'
 export * from './useMap'
 export * from './useMediaQuery'
+export * from './useNetworkStatus'
 export * from './useOnClickOutside'
 export * from './useReadLocalStorage'
 export * from './useResizeObserver'

packages/usehooks-ts/src/useNetworkStatus/index.ts

@@ -0,0 +1 @@
+export * from './useNetworkStatus'

packages/usehooks-ts/src/useNetworkStatus/useNetworkStatus.demo.tsx

@@ -0,0 +1,11 @@
+import { useNetworkStatus } from './useNetworkStatus'
+
+export default function Component() {
+  const { isOnline } = useNetworkStatus()
+
+  return (
+    <div>
+      The current user network status is: {isOnline ? 'Online' : 'Offline'}
+    </div>
+  )
+}

packages/usehooks-ts/src/useNetworkStatus/useNetworkStatus.md

@@ -0,0 +1 @@
+A simple way to tracks the network status (online/offline) of the user.

packages/usehooks-ts/src/useNetworkStatus/useNetworkStatus.test.ts

@@ -0,0 +1,11 @@
+import { renderHook } from '@testing-library/react'
+
+import { useNetworkStatus } from './useNetworkStatus'
+
+describe('useNetworkStatus()', () => {
+  it('should useNetworkStatus be ok', () => {
+    const { result } = renderHook(() => useNetworkStatus())
+
+    expect(result.current.isOnline).toBe(true)
+  })
+})

packages/usehooks-ts/src/useNetworkStatus/useNetworkStatus.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react'
+
+/** Hook return type. */
+type UseNetworkStatusReturnType = {
+  /** The current user network status. */
+  isOnline: boolean
+}
+
+const IS_SERVER = typeof window === 'undefined'
+
+/**
+ * Custom hook to tracks the user's network status.
+ * @returns {UseNetworkStatusReturnType} A boolean value that represents the user's network status (online/offline).
+ * @public
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-network-status)
+ * @example
+ * ```tsx
+ * const { isOnline } = useNetworkStatus();
+ *
+ * console.log(isOnline); // true/false
+ * ```
+ */
+export function useNetworkStatus(): UseNetworkStatusReturnType {
+  const [isOnline, setIsOnline] = useState<boolean>(() => {
+    if (IS_SERVER) {
+      return true
+    }
+    return window.navigator.onLine
+  })
+
+  useEffect(() => {
+    if (IS_SERVER) {
+      return
+    }
+
+    const updateOnlineStatus = () => {
+      setIsOnline(navigator.onLine)
+    }
+
+    window.addEventListener('online', updateOnlineStatus)
+    window.addEventListener('offline', updateOnlineStatus)
+
+    return () => {
+      window.removeEventListener('online', updateOnlineStatus)
+      window.removeEventListener('offline', updateOnlineStatus)
+    }
+  }, [])
+
+  return {
+    isOnline,
+  }
+}