-
+
+
+ {isLoading ? 'Loading...' : 'Fetch Data (max 1/2sec)'}
+
+
API calls made: {requestCount}
+
+ {data.map((item) => (
+
+ {item.title}
+
+ ))}
+
+
+ Click rapidly - API calls are throttled to 1 per 2 seconds
+
+
+ )
+}
+```
+
+### Mouse Movement Tracking
+
+::: details Example
+
+```tsx {8-17}
+import { useState, useEffect } from 'react'
+import { useThrottledFn } from 'classic-react-hooks'
+
+export default function MouseTracker() {
+ const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
+ const [updateCount, setUpdateCount] = useState(0)
+
+ const throttledMouseMove = useThrottledFn({
+ callbackToThrottle: (event: MouseEvent) => {
+ setMousePos({
+ x: event.clientX,
+ y: event.clientY,
+ })
+ setUpdateCount((prev) => prev + 1)
+ },
+ delay: 50, // 20 updates per second max
+ })
+
+ useEffect(() => {
+ const handleMouseMove = (event: MouseEvent) => {
+ throttledMouseMove(event)
+ }
+
+ document.addEventListener('mousemove', handleMouseMove)
+ return () => document.removeEventListener('mousemove', handleMouseMove)
+ }, [throttledMouseMove])
+
+ return (
+
+
Mouse Position Tracker
+
+ Position: ({mousePos.x}, {mousePos.y})
+
+
Updates: {updateCount}
- value - {throttledInput}
+ Move your mouse around this area
)
}
```
+
+:::
diff --git a/apps/doc/hooks/use-timeout-effect.md b/apps/doc/hooks/use-timeout-effect.md
index 2e19336..df1902b 100644
--- a/apps/doc/hooks/use-timeout-effect.md
+++ b/apps/doc/hooks/use-timeout-effect.md
@@ -4,35 +4,48 @@ outline: deep
# use-timeout-effect
-- A hooks which fires the provided callback only once when the given delay is passed, just like the `setTimeout`.
+A React hook that fires a provided callback after a specified timeout, similar to `setTimeout`, but with additional control methods for clearing and restarting the timer.
-### Parameters
+## Features
-| Parameter | Type | Required | Default Value | Description |
-| --------- | :------: | :------: | :-----------: | --------------------------------------------------------- |
-| cb | Function | ✅ | - | Callback to fire after given amount of timeout is passed. |
-| timeout | number | ❌ | 100 | Timeout value after which the callback is fired. |
+- **Scheduled execution:** Executes a callback after a specified delay
+- **Flexible control:** Provides methods to clear or restart the timer
+- **Auto cleanup:** Automatically clears up timer on component unmount
-### Returns
+## Parameters
-- It returns an object.
-- `clearTimer` : () => void
-- `restartTimer` : () => void
+| Parameter | Type | Required | Default Value | Description |
+| --------- | :------: | :------: | :-----------: | ------------------------------------------------------ |
+| handler | Function | ✅ | - | The callback function to execute after the timeout |
+| timeout | number | ❌ | 100 | The delay in milliseconds before executing the handler |
-### Usage
+## Return value(s)
+
+This hooks returns an object having several utility functions for controlling the timeout-effect:
+
+| Property | Type | Description |
+| ------------ | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| clearTimer | () => void | Clears the current timeout timer, preventing the handler from executing if it hasn't already run. Similar to calling `clearTimeout()` on a standard timeout. |
+| restartTimer | (new_interval?: number) => void | Clears the current timer and starts a new one. Optionally accepts a `new_interval` parameter to use a different timeout duration. If no interval is provided, uses the original timeout value. |
+
+## Usage Examples
+
+### Basic use
```ts
import { useState } from 'react'
-import { useTimeoutEffect } from 'classic-react-hooks'
+import useTimeoutEffect from './useTimeoutEffect'
-export default function YourComponent() {
- const [show, setShow] = useState(false)
+export default function BasicExample() {
+ const [message, setMessage] = useState('')
- useTimeoutEffect(() => {
- console.log('use-timeout-callback')
- setShow(true)
- }, 2000)
+ useTimeoutEffect({
+ handler: () => {
+ setMessage('Timer executed!')
+ },
+ timeout: 2000,
+ })
- return
+ return
{message}
}
```
diff --git a/apps/doc/hooks/use-window-resize.md b/apps/doc/hooks/use-window-resize.md
index 522c6cd..bef1f1c 100644
--- a/apps/doc/hooks/use-window-resize.md
+++ b/apps/doc/hooks/use-window-resize.md
@@ -4,48 +4,129 @@ outline: deep
# use-window-resize
-- A hook which evaluates the passed callback on window resize event and returns the result of that callback.
+A React hook that evaluates provided callback function on window resize event and returns the result of it.
-### Parameters
+::: info
+At it's core, [useEventListener](use-event-listener.html) hook is used internally for listening to resize event.
+:::
-| Parameter | Type | Required | Default Value | Description |
-| --------- | :------------------------: | :------: | :-----------: | ------------------------------------------------------------------- |
-| cb | [Callback](#parametertype) | ✅ | - | A callback which gets fired whenever the window resize event occurs |
-| options | [Options](#parametertype) | ❌ | undefined | Options to pass as feature flag |
+## Features
-#### ParameterType
+- **Custom handler:** Execute custom logic on window resize
+- **Reactive:** Automatic re-evaluation and state updates
+- **Configurable:** Configurable default values and event injection
+- **Performance:** It uses [useLayoutEffect](https://react.dev/reference/react/useLayoutEffect) hook for resize event listening
+
+## Parameters
+
+| Parameter | Type | Required | Default Value | Description |
+| --------- | :--------------------------: | :------: | :-----------: | ------------------------------------------- |
+| handler | [Handler](#type-definitions) | ✅ | - | Callback function executed on window resize |
+| options | [Options](#type-definitions) | ❌ | undefined | Configuration options |
+| |
+
+### Options Parameter
+
+| Property | Type | Default | Description |
+| ----------------- | ----------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| defaultValue | Generic `T` | undefined | The initial value returned before the first resize event. If not provided, the `handler` is called immediately on mount |
+| shouldInjectEvent | boolean | true | Controls whether the resize event listener should be attached. When `false`, the listener is not added |
+
+### Type Definitions
+
+::: details
```ts
-type Callback = () => T
-type Options = { shouldInjectEvent?: boolean; defaultValue?: T }
+type Handler
= () => T
+type Options = { shouldInjectEvent?: boolean; defaultValue?: T }
```
-### Returns
+:::
-- It returns the value, which is the result of the passed callback.
+## Return value(s)
-### Usage
+Returns the evaluated result of the `handler` function call on resize event.
-```ts
+| Return Value | Type | Description |
+| --------------------------------- | ----------- | -------------------------- |
+| Result of `handler` function call | Generic `T` | Result to use in component |
+
+## Common Use Cases
+
+- Creating dynamic layouts
+- Toggling element visibility based on window dimension
+- Dynamically lazy loading components for mobile and desktop screens
+
+## Usage Examples
+
+### Basic Responsive Breakpoints
+
+```ts {4-10,15-17}
import { useWindowResize } from 'classic-react-hooks'
-export default function YourComponent() {
- const result = useWindowResize(() => {
- if (window.innerWidth < 500) {
- return 'md'
- }
- if (window.innerWidth > 500 && window.innerWidth < 800) {
- return 'lg'
- }
+function ResponsiveComponent() {
+ const breakpoint = useWindowResize(() => {
+ const width = window.innerWidth
+ if (width < 640) return 'sm'
+ if (width < 768) return 'md'
+ if (width < 1024) return 'lg'
return 'xl'
})
return (
- <>
- {result == 'md' && md }
- {result == 'lg' && lg }
- {result == 'xl' && xl }
-
+
+
Current breakpoint: {breakpoint}
+ {breakpoint === 'sm' &&
}
+ {breakpoint === 'md' &&
}
+ {['lg', 'xl'].includes(breakpoint) &&
}
+
{/* Navigation content */}
+}
+```
+
+:::
+
+## Advanced Usage
+
+### Debounced Resize Handler
+
+::: details Example
+
+```ts {7-10}
+import { useMemo } from 'react'
+import { useWindowResize, useDebouncedFn } from 'classic-react-hooks'
+
+function ExpensiveCalculation() {
+ const expensiveHandler = useDebouncedFn(
+ () =>
+ debounce(() => {
+ // Expensive calculation here
+ return performComplexCalculation()
+ }),
+ 250
)
+
+ const result = useWindowResize(expensiveHandler)
+
+ return {result}
}
```
+
+:::
diff --git a/apps/doc/index.md b/apps/doc/index.md
index c10b436..b1189d9 100644
--- a/apps/doc/index.md
+++ b/apps/doc/index.md
@@ -3,11 +3,11 @@
layout: home
name: 'classic-react-hooks'
-tagline: An awesome collection of feature packed custom hooks
+tagline: Essential Custom Hooks for React Developers
hero:
name: 'classic-react-hooks'
- tagline: Collection of feature packed custom hooks
+ tagline: Lightweight · Minimal · Fast
actions:
- theme: brand
text: Get Started
@@ -15,14 +15,18 @@ hero:
features:
- icon: 🚀
- title: Awesome Collection of Hooks
- details: Feature packed custom hooks to make your feature building easy.
+ title: Essential React Hooks
+ details: Comprehensive collection of custom hooks
+
+ - icon: 🌲
+ title: Lightweight
+ details: Zero deps and tiny bundle
- icon:
+
+/**
+ * React Context for sharing internet connectivity status across the component tree
+ *
+ * @description
+ * This context provides all the connectivity status and control methods from
+ * useCanReachToInternet hook to any component in the React component tree
+ * without prop drilling.
+ *
+ */
+let CanReachToInternetCtx: Context
+
+/**
+ * Props interface for the CanReachToInternetCtxProvider component
+ */
+interface CanReachToInternetCtxProviderProps extends CanReachToInternetOptions {
+ /** React children components that will have access to the connectivity context */
+ children: ReactNode
+}
+
+/**
+ * Context Provider component for internet connectivity monitoring
+ *
+ * @description
+ * This provider component wraps your application or component tree to provide
+ * internet connectivity status and controls to all child components. It uses
+ * the useCanReachToInternet hook internally and shares its values through React Context.
+ *
+ * The provider accepts all the same configuration options as the useCanReachToInternet
+ * hook, allowing you to configure network polling, test URLs, and polling intervals
+ * at the application level.
+ *
+ *
+ * @example
+ * // Basic usage - wrap your app with the provider
+ import { CanReachToInternetCtxProvider } from 'classic-react-hooks'
+
+ function App() {
+ return (
+
+
+
+ )
+ }
+ *
+ * */
+export function CanReachToInternetCtxProvider({ children, ...options }: CanReachToInternetCtxProviderProps) {
+ CanReachToInternetCtx = useRef(createContext({} as CtxValues)).current
+ const values = useCanReachToInternet(options)
+
+ return {children}
+}
+
+/**
+ * Custom hook to consume the internet connectivity context
+ *
+ * @description
+ * This hook provides access to all the internet connectivity status and control
+ * methods from the nearest CanReachToInternetCtxProvider in the component tree.
+ * It must be used within a component that is wrapped by CanReachToInternetCtxProvider,
+ * otherwise it will throw an error.
+ *
+ * The hook returns the same values as useCanReachToInternet, but accessed through
+ * React Context instead of being created locally in each component.
+ *
+ * @throws {Error} Throws an error if used outside of CanReachToInternetCtxProvider
+ *
+ * @example
+ * // Basic usage in a component
+ import { useCanReachToInternetCtx } from 'classic-react-hooks'
+
+ function NetworkStatusBadge() {
+ const { isFullyConnected, isCheckingConnection } = useCanReachToInternetCtx()
+
+ if (isCheckingConnection) {
+ return Checking...
+ }
+
+ return (
+
+ {isFullyConnected ? '🟢 Online' : '🔴 Offline'}
+
+ )
+ }
+ *
+ * */
+export function useCanReachToInternetCtx() {
+ if (!CanReachToInternetCtx) {
+ throw new Error('useCanReachToInternetCtx must be used within an CanReachToInternetCtxProvider')
+ }
+ return useContext(CanReachToInternetCtx)
+}
diff --git a/src/lib/use-can-reach-to-internet/index.test.tsx b/src/lib/use-can-reach-to-internet/index.test.tsx
new file mode 100644
index 0000000..aa8cf41
--- /dev/null
+++ b/src/lib/use-can-reach-to-internet/index.test.tsx
@@ -0,0 +1,395 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { renderHook, act, waitFor } from '@testing-library/react'
+import useCanReachToInternet, { type CanReachToInternetOptions } from '.'
+
+// Mock fetch
+const mockFetch = vi.fn()
+global.fetch = mockFetch
+
+// Mock navigator.onLine
+const mockNavigator = {
+ onLine: true,
+}
+Object.defineProperty(window, 'navigator', {
+ value: mockNavigator,
+ writable: true,
+})
+
+// Mock window.(add/remove)EventListener
+const mockAddEventListener = vi.fn()
+const mockRemoveEventListener = vi.fn()
+Object.defineProperty(window, 'addEventListener', {
+ value: mockAddEventListener,
+ writable: true,
+})
+Object.defineProperty(window, 'removeEventListener', {
+ value: mockRemoveEventListener,
+ writable: true,
+})
+
+describe('useCanReachToInternet', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockNavigator.onLine = true
+ mockFetch.mockClear()
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ vi.clearAllTimers()
+ })
+
+ describe('Initial state', () => {
+ it('should initialize with correct default values', async () => {
+ mockFetch.mockResolvedValue(new Response())
+
+ const { result } = renderHook(() => useCanReachToInternet())
+
+ expect(result.current.isOnline).toBe(true)
+ expect(result.current.canReachToInternet).toBe(false)
+ expect(result.current.isFullyConnected).toBe(false)
+ expect(result.current.isNetworkPollingEnabled).toBe(true)
+ expect(result.current.isCheckingConnection).toBe(true)
+ })
+
+ it('should prioritize custom options', () => {
+ const options: CanReachToInternetOptions = {
+ enableNetworkPolling: false,
+ networkPollingInterval: 5000,
+ testUrl: 'https://custom.test',
+ }
+
+ const { result } = renderHook(() => useCanReachToInternet(options))
+
+ expect(result.current.isNetworkPollingEnabled).toBe(false)
+ })
+ })
+
+ describe('Network connectivity checking', () => {
+ it('should set canReachToInternet to true when fetch succeeds', async () => {
+ mockFetch.mockResolvedValue(new Response())
+
+ const { result } = renderHook(() => useCanReachToInternet())
+
+ await waitFor(() => {
+ expect(result.current.isFullyConnected).toBe(true)
+ expect(result.current.canReachToInternet).toBe(true)
+ })
+ })
+
+ it('should set canReachToInternet to false when fetch fails', async () => {
+ mockFetch.mockRejectedValue(new Error('Network error'))
+
+ const { result } = renderHook(() => useCanReachToInternet())
+
+ await waitFor(() => {
+ expect(result.current.canReachToInternet).toBe(false)
+ })
+
+ expect(result.current.isFullyConnected).toBe(false)
+ expect(result.current.isCheckingConnection).toBe(false)
+ })
+
+ it('should use correct fetch options', async () => {
+ mockFetch.mockResolvedValue(new Response())
+
+ renderHook(() => useCanReachToInternet())
+
+ await waitFor(() => {
+ vi.clearAllTimers()
+ expect(mockFetch).toHaveBeenCalledWith(
+ 'https://dns.google',
+ expect.objectContaining({
+ method: 'HEAD',
+ cache: 'no-cache',
+ mode: 'no-cors',
+ headers: {
+ 'Cache-Control': 'no-cache, no-store, must-revalidate',
+ Pragma: 'no-cache',
+ },
+ signal: expect.any(AbortSignal),
+ })
+ )
+ })
+ })
+
+ it('should use custom testUrl when provided', async () => {
+ mockFetch.mockResolvedValue(new Response())
+ const customUrl = 'https://custom.test'
+
+ renderHook(() => useCanReachToInternet({ testUrl: customUrl }))
+
+ expect(mockFetch).toHaveBeenCalledWith(customUrl, expect.any(Object))
+ })
+ })
+
+ describe('Network polling', () => {
+ beforeEach(() => {
+ vi.useFakeTimers()
+ })
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ it('should poll network at specified intervals when enabled', async () => {
+ mockFetch.mockResolvedValue(new Response())
+
+ renderHook(() => useCanReachToInternet({ networkPollingInterval: 1000 }))
+
+ expect(mockFetch).toHaveBeenCalledTimes(1)
+
+ await vi.advanceTimersByTimeAsync(1000)
+ expect(mockFetch).toHaveBeenCalledTimes(2)
+
+ await vi.advanceTimersByTimeAsync(1000)
+ expect(mockFetch).toHaveBeenCalledTimes(3)
+
+ await vi.advanceTimersByTimeAsync(3000)
+ expect(mockFetch).toHaveBeenCalledTimes(6)
+ })
+
+ it('should not poll when network polling is disabled', async () => {
+ mockFetch.mockResolvedValue(new Response())
+
+ renderHook(() => useCanReachToInternet({ enableNetworkPolling: false }))
+
+ expect(mockFetch).toHaveBeenCalledTimes(1)
+ vi.advanceTimersByTimeAsync(1000)
+ expect(mockFetch).toHaveBeenCalledTimes(1)
+ })
+
+ it('should stop polling when stopNetworkPolling is called', async () => {
+ mockFetch.mockResolvedValue(new Response())
+
+ const { result } = renderHook(() => useCanReachToInternet({ networkPollingInterval: 1000 }))
+
+ expect(mockFetch).toHaveBeenCalledTimes(1)
+
+ act(() => {
+ result.current.stopNetworkPolling()
+ })
+ expect(result.current.isNetworkPollingEnabled).toBe(false)
+ expect(mockFetch).toHaveBeenCalledTimes(2)
+
+ vi.advanceTimersByTimeAsync(1000)
+ expect(mockFetch).toHaveBeenCalledTimes(2)
+ })
+
+ it('should start polling when startNetworkPolling is called', async () => {
+ mockFetch.mockResolvedValue(new Response())
+
+ const { result } = renderHook(() => useCanReachToInternet({ enableNetworkPolling: false }))
+
+ expect(mockFetch).toHaveBeenCalledTimes(1)
+ expect(result.current.isNetworkPollingEnabled).toBe(false)
+
+ await vi.advanceTimersByTimeAsync(3000)
+ expect(mockFetch).toHaveBeenCalledTimes(1)
+
+ act(() => {
+ result.current.startNetworkPolling()
+ })
+
+ expect(result.current.isNetworkPollingEnabled).toBe(true)
+ expect(mockFetch).toHaveBeenCalledTimes(2)
+
+ await vi.advanceTimersByTimeAsync(3000)
+ expect(mockFetch).toHaveBeenCalledTimes(3)
+
+ await vi.advanceTimersByTimeAsync(3000)
+ expect(mockFetch).toHaveBeenCalledTimes(4)
+ })
+ })
+
+ describe('Manual network checking', () => {
+ it('should check network when forceCheckNetwork is called', async () => {
+ mockFetch.mockResolvedValue(new Response())
+
+ const { result } = renderHook(() => useCanReachToInternet({ enableNetworkPolling: false }))
+
+ expect(mockFetch).toHaveBeenCalledTimes(1)
+
+ act(() => {
+ result.current.forceCheckNetwork()
+ })
+
+ expect(mockFetch).toHaveBeenCalledTimes(2)
+ })
+
+ it('should update isCheckingConnection state during manual check', async () => {
+ let resolvePromise: (value: Response) => void
+ const pendingPromise = new Promise((resolve) => {
+ resolvePromise = resolve
+ })
+ mockFetch.mockReturnValue(pendingPromise)
+
+ const { result } = renderHook(() => useCanReachToInternet({ enableNetworkPolling: false }))
+
+ act(() => {
+ result.current.forceCheckNetwork()
+ })
+
+ expect(result.current.isCheckingConnection).toBe(true)
+
+ act(() => {
+ resolvePromise(new Response())
+ })
+
+ await waitFor(() => {
+ expect(result.current.isCheckingConnection).toBe(false)
+ })
+ })
+ })
+
+ describe('Browser online/offline detection', () => {
+ it('should return false for canReachToInternet when browser is offline', async () => {
+ mockNavigator.onLine = false
+
+ const { result } = renderHook(() => useCanReachToInternet())
+
+ await waitFor(() => {
+ expect(result.current.isOnline).toBe(false)
+ expect(result.current.canReachToInternet).toBe(false)
+ expect(result.current.isFullyConnected).toBe(false)
+ })
+
+ // Should not make fetch call when offline
+ expect(mockFetch).not.toHaveBeenCalled()
+ })
+
+ it('should listen to online/offline events', () => {
+ renderHook(() => useCanReachToInternet())
+
+ expect(mockAddEventListener).toHaveBeenCalledWith('online', expect.any(Function))
+ expect(mockAddEventListener).toHaveBeenCalledWith('offline', expect.any(Function))
+ })
+
+ it('should update the state when online/offline events are triggered without polling enabled', async () => {
+ const { result, rerender } = renderHook(() => useCanReachToInternet({ enableNetworkPolling: false }))
+
+ await waitFor(() => {
+ expect(result.current.canReachToInternet).toBe(true)
+ })
+
+ // Should update the state when offline
+ await waitFor(() => {
+ mockNavigator.onLine = false
+ rerender()
+ expect(result.current.canReachToInternet).toBe(false)
+ })
+
+ // Should update the state when online
+ await waitFor(() => {
+ mockNavigator.onLine = true
+ rerender()
+ expect(result.current.canReachToInternet).toBe(true)
+ })
+ })
+ })
+
+ describe('Cleanup and abort handling', () => {
+ it('should abort pending requests on unmount', async () => {
+ mockFetch.mockImplementation(() => {
+ // Never resolving the operation for aborting at unmount phase
+ return new Promise(() => {})
+ })
+
+ const { unmount } = renderHook(() => useCanReachToInternet())
+
+ expect(mockFetch).toHaveBeenCalled()
+
+ const abortSpy = vi.spyOn(AbortController.prototype, 'abort')
+
+ unmount()
+
+ expect(abortSpy).toHaveBeenCalledWith('cleanup')
+ })
+
+ it('should not update state if request was aborted', async () => {
+ const abortError = new Error('AbortError')
+ abortError.name = 'AbortError'
+
+ mockFetch.mockRejectedValue(abortError)
+
+ const { result } = renderHook(() => useCanReachToInternet())
+
+ // The state should not be updated when request is aborted
+ await waitFor(() => {
+ expect(result.current.isCheckingConnection).toBe(false)
+ })
+ })
+ })
+
+ describe('getCanReachToInternetStatus method', () => {
+ it('should return current canReachToInternet status', async () => {
+ mockFetch.mockResolvedValue(new Response())
+
+ const { result } = renderHook(() => useCanReachToInternet())
+
+ await waitFor(() => {
+ expect(result.current.canReachToInternet).toBe(true)
+ })
+
+ expect(result.current.getCanReachToInternetStatus()).toBe(true)
+ })
+
+ it('should return false when cannot reach internet', async () => {
+ mockFetch.mockRejectedValue(new Error('Network error'))
+
+ const { result } = renderHook(() => useCanReachToInternet())
+
+ await waitFor(() => {
+ expect(result.current.canReachToInternet).toBe(false)
+ })
+
+ expect(result.current.getCanReachToInternetStatus()).toBe(false)
+ })
+ })
+
+ describe('Edge cases', () => {
+ it('should handle multiple rapid calls to forceCheckNetwork', async () => {
+ mockFetch.mockResolvedValue(new Response())
+
+ const { result } = renderHook(() => useCanReachToInternet({ enableNetworkPolling: false }))
+
+ // Make multiple rapid calls
+ act(() => {
+ result.current.forceCheckNetwork()
+ result.current.forceCheckNetwork()
+ result.current.forceCheckNetwork()
+ })
+
+ await waitFor(() => {
+ expect(result.current.isCheckingConnection).toBe(false)
+ })
+
+ // Should handle gracefully without errors
+ expect(result.current.canReachToInternet).toBe(true)
+ })
+
+ it('should handle network status changes during polling', async () => {
+ mockFetch.mockResolvedValue(new Response())
+
+ const { result, rerender } = renderHook(
+ ({ online }) => {
+ mockNavigator.onLine = online
+ return useCanReachToInternet({ networkPollingInterval: 1000 })
+ },
+ { initialProps: { online: true } }
+ )
+
+ await waitFor(() => {
+ expect(result.current.canReachToInternet).toBe(true)
+ })
+
+ // Simulate going offline
+ rerender({ online: false })
+
+ await waitFor(() => {
+ expect(result.current.isOnline).toBe(false)
+ expect(result.current.canReachToInternet).toBe(false)
+ expect(result.current.isFullyConnected).toBe(false)
+ })
+ })
+ })
+})
diff --git a/src/lib/use-can-reach-to-internet/index.tsx b/src/lib/use-can-reach-to-internet/index.tsx
new file mode 100644
index 0000000..4f2df1f
--- /dev/null
+++ b/src/lib/use-can-reach-to-internet/index.tsx
@@ -0,0 +1,223 @@
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react'
+import useSyncedRef from '../use-synced-ref'
+
+export type CanReachToInternetOptions = {
+ /** Enable automatic network polling to continuously check connectivity */
+ enableNetworkPolling?: boolean
+ /** Interval in milliseconds between network polls */
+ networkPollingInterval?: number
+ /** URL to test internet connectivity against */
+ testUrl?: string
+}
+export type CanReachToInternetBoolean = boolean
+
+const DEFAULT_OPTIONS: Required = {
+ enableNetworkPolling: true,
+ networkPollingInterval: 3000,
+ testUrl: 'https://dns.google', // https://8.8.8.8
+}
+
+/**
+ * @description
+ * A comprehensive React hook for monitoring internet connectivity status that goes beyond basic online/offline detection by actually testing network reachability.
+
+ * @example
+ * import { useCanReachToInternet } from 'classic-react-hooks'
+ *
+ * function ConnectivityStatus() {
+ const {
+ isOnline,
+ canReachToInternet,
+ isFullyConnected,
+ isCheckingConnection,
+ isNetworkPollingEnabled,
+ startNetworkPolling,
+ stopNetworkPolling,
+ forceCheckNetwork
+ } = useCanReachToInternet()
+
+ return (
+
+
Connectivity Status
+
+
+
+ Browser Online: {isOnline ? 'Yes' : 'No'}
+
+
+
+ Internet Reachable: {canReachToInternet ? 'Yes' : 'No'}
+
+
+
+ Fully Connected: {isFullyConnected ? 'Yes' : 'No'}
+
+
+ {isCheckingConnection && (
+
Checking connectivity...
+ )}
+
+
+
+
+ Check Now
+
+
+ {isNetworkPollingEnabled ? (
+
+ Stop Polling
+
+ ) : (
+
+ Start Polling
+
+ )}
+
+
(null)
+ const timeoutRef = useRef(null)
+
+ const handlers = useRef({
+ clearPendingOperations: () => {
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort('cleanup')
+ abortControllerRef.current = null
+ }
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ timeoutRef.current = null
+ }
+ },
+ stopNetworkPolling: () => setIsNetworkPollingEnabled(false),
+ startNetworkPolling: () => setIsNetworkPollingEnabled(true),
+ getCanReachToInternetStatus: () => canReachToInternetRef.current as CanReachToInternetBoolean,
+ })
+
+ /**
+ * Performs an actual network request to test internet connectivity
+ *
+ * @description
+ * This function makes a HEAD request to the configured test URL to verify
+ * that the device can actually reach the internet, not just that the browser
+ * thinks it's online.
+ *
+ */
+ const checkIfCanReachToInternet = async (
+ { pollingEnabled }: { pollingEnabled?: boolean } = { pollingEnabled: true }
+ ) => {
+ // If offline then early return with flag update
+ if (!isOnline) {
+ setCanReachToInternet(false)
+ return
+ }
+
+ // Clear any existing operations
+ handlers.current.clearPendingOperations()
+
+ const abortController = new AbortController()
+ abortControllerRef.current = abortController
+
+ setIsCheckingConnection(true)
+
+ try {
+ // ping to dns server to check if really connected to internet
+ await fetch(config.testUrl, {
+ method: 'HEAD',
+ cache: 'no-cache',
+ mode: 'no-cors',
+ headers: {
+ 'Cache-Control': 'no-cache, no-store, must-revalidate',
+ Pragma: 'no-cache',
+ },
+ signal: abortController.signal,
+ })
+ setCanReachToInternet(true)
+ } catch (err) {
+ // Only update state if the request wasn't aborted
+ if (!abortController.signal.aborted) {
+ setCanReachToInternet(false)
+ }
+ } finally {
+ if (isNetworkPollingEnabled && !abortController.signal.aborted) {
+ if (pollingEnabled) {
+ timeoutRef.current = setTimeout(() => checkIfCanReachToInternet(), config.networkPollingInterval)
+ }
+ }
+ setIsCheckingConnection(false)
+ }
+ }
+
+ useEffect(() => {
+ // If network polling is stopped, then do not run again.
+ // Initially trigger checker function
+ if (isInitialCallDone.current && !isNetworkPollingEnabled) {
+ // Even if polling is stopped, check if the device is online.
+ // And update the state
+ if (!isOnline) {
+ setCanReachToInternet(false)
+ } else {
+ checkIfCanReachToInternet({ pollingEnabled: false })
+ }
+ return
+ }
+ isInitialCallDone.current = true
+ checkIfCanReachToInternet()
+
+ return handlers.current.clearPendingOperations
+ }, [isOnline, isNetworkPollingEnabled, config.networkPollingInterval])
+
+ return {
+ isOnline,
+ canReachToInternet,
+ isFullyConnected: isOnline && canReachToInternet,
+ isNetworkPollingEnabled,
+ isCheckingConnection,
+ stopNetworkPolling: handlers.current.stopNetworkPolling,
+ startNetworkPolling: handlers.current.startNetworkPolling,
+ getCanReachToInternetStatus: handlers.current.getCanReachToInternetStatus,
+ forceCheckNetwork: checkIfCanReachToInternet,
+ }
+}
+
+// Handler to listen "online" and "offline" events
+function subscribe(callback: () => void) {
+ window.addEventListener('online', callback)
+ window.addEventListener('offline', callback)
+
+ return () => {
+ window.removeEventListener('online', callback)
+ window.removeEventListener('offline', callback)
+ }
+}
+// getting network connection status
+const getSnapshot = () => navigator.onLine
diff --git a/src/lib/use-combined-key-event-listener/index.tsx b/src/lib/use-combined-key-event-listener/index.tsx
deleted file mode 100644
index 8bae0ad..0000000
--- a/src/lib/use-combined-key-event-listener/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client'
-import React, { useRef } from 'react'
-import { useEventListener } from '../use-event-listener'
-
-type Options = AddEventListenerOptions & {
- preventDefault?: boolean
- shouldAddEvent?: boolean
-}
-
-export default function useCombinedKeyEventListener(
- type: K,
- keys: string[],
- handler: (event: GlobalEventHandlersEventMap[K]) => void,
- options?: boolean | Options
-) {
- const pressedKeysMap = useRef>([])
- let shouldInjectEvent: boolean | undefined = true
- let eventOptions: Options = {}
-
- if (options && options instanceof Object && !Array.isArray(options)) {
- const { shouldAddEvent, ...restOptions } = options
- eventOptions = restOptions
- shouldInjectEvent = shouldAddEvent
- }
-
- const listener = (event: GlobalEventHandlersEventMap[K]) => {
- if ('key' in event) {
- event.ctrlKey && pressedKeysMap.current.push('Control')
- event.shiftKey && pressedKeysMap.current.push('Shift')
- event.altKey && pressedKeysMap.current.push('Alt')
-
- !pressedKeysMap.current.includes(event.key) && pressedKeysMap.current.push(event.key)
-
- if (keys.toString() == pressedKeysMap.current.toString()) {
- if (eventOptions?.preventDefault) event.preventDefault()
- handler(event)
- }
- }
- }
-
- const clearPressedKey = () => {
- pressedKeysMap.current.pop()
- }
-
- useEventListener(document, type, listener, options)
-
- useEventListener(document, 'keyup', clearPressedKey, options)
- useEventListener(window, 'blur', () => (pressedKeysMap.current = []), shouldInjectEvent)
- useEventListener(window, 'contextmenu', () => (pressedKeysMap.current = []), shouldInjectEvent)
-}
diff --git a/src/lib/use-copy-to-clipboard/index.test.tsx b/src/lib/use-copy-to-clipboard/index.test.tsx
new file mode 100644
index 0000000..dcec6b8
--- /dev/null
+++ b/src/lib/use-copy-to-clipboard/index.test.tsx
@@ -0,0 +1,370 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, waitFor, renderHook } from '@testing-library/react'
+import React, { useState } from 'react'
+import useCopyToClipboard, { copyToClipboardFn } from '.'
+
+describe('use-copy-to-clipboard', () => {
+ // Mock clipboard API
+ const mockWriteText = vi.fn()
+ const originalClipboard = navigator.clipboard
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+
+ Object.defineProperty(navigator, 'clipboard', {
+ value: {
+ writeText: mockWriteText,
+ },
+ configurable: true,
+ })
+
+ mockWriteText.mockResolvedValue(undefined)
+ })
+
+ afterEach(() => {
+ Object.defineProperty(navigator, 'clipboard', {
+ value: originalClipboard,
+ configurable: true,
+ })
+ })
+
+ describe('Hook behavior', () => {
+ it('should return a function', () => {
+ const { result } = renderHook(() => useCopyToClipboard())
+ expect(typeof result.current).toBe('function')
+ expect(result.current.length).toBe(3)
+ })
+
+ it('should use props callbacks when provided', async () => {
+ const onSuccess = vi.fn()
+ const onError = vi.fn()
+
+ render((null)
+
+ const copyToClipboard = useCopyToClipboard({
+ onSuccess: onSuccess || (() => setCopied(true)),
+ onError: onError || ((err) => setError(err.message)),
+ })
+
+ return (
+
+
copyToClipboard(testData)} data-testid='copy-button'>
+ Copy
+
+
+ copyToClipboard(testData, () => {
+ setCopied(true)
+ overrideOnSuccess?.()
+ })
+ }
+ data-testid='copy-button-with-callbacks'
+ >
+ Copy with callbacks
+
+ {copied &&
Copied!
}
+ {error &&
{error}
}
+
{copied ? 'Copied!' : 'Copy Text'}
+ }
*
* @see Docs https://classic-react-hooks.vercel.app/hooks/use-copy-to-clipboard.html
*
@@ -23,6 +46,16 @@ export default function useCopyToClipboard(props?: { onSuccess?: OnSuccess; onEr
return copyToClipboard.current
}
+/**
+ *
+ * @example
+ copyToClipboardFn(
+ 'Text to copy',
+ () => console.log('Copied successfully!'),
+ (error) => console.error('Copy failed:', error)
+ )
+ *
+ */
export async function copyToClipboardFn(data: string, onSuccess?: OnSuccess, onError?: OnError) {
try {
if (navigator.clipboard) {
diff --git a/src/lib/use-counter/index.test.tsx b/src/lib/use-counter/index.test.tsx
index b5636df..cf4535e 100644
--- a/src/lib/use-counter/index.test.tsx
+++ b/src/lib/use-counter/index.test.tsx
@@ -7,7 +7,7 @@ describe('use-counter', () => {
})
it('should return counter value of zero, incrementCounter and decrementCounter handlers with default key', () => {
- const { result } = renderHook(() => useCounter('', 1))
+ const { result } = renderHook(() => useCounter('', { initialValue: 1 }))
expect('counter' in result.current).not.toBeUndefined()
expect(result.current.counter).toBe(1)
diff --git a/src/lib/use-counter/index.tsx b/src/lib/use-counter/index.tsx
index 593df73..0670cd7 100644
--- a/src/lib/use-counter/index.tsx
+++ b/src/lib/use-counter/index.tsx
@@ -1,4 +1,3 @@
-'use client'
import type { Prettify } from '../../types'
import React, { useRef, useState } from 'react'
import { capitalizeFirstLetter } from '../../utils/capitalize-first-letter'
@@ -8,13 +7,37 @@ const LOWERCASED_COUNTER_TEXT = COUNTER_TEXT.toLowerCase() as Lowercase
+
+
decrement
+
{counter}
+
increment
+
@@ -18,18 +17,28 @@