react-data-fetcher-hook

useDataFetcher - A Powerful React Hook for HTTP & WebSocket Requests

useDataFetcher is a fully featured React hook that simplifies making HTTP requests with support for retries, auto-refresh, FormData, and WebSockets.

$3

$3

``sh
npm install use-data-fetcher
`

or

`sh
yarn add use-data-fetcher
`

$3

#### Basic Usage (HTTP Request)
`tsx
import { useDataFetcher } from "use-data-fetcher";

function MyComponent() {
const { data, loading, error, refetch } = useDataFetcher({
url: "https://api.example.com/data",
method: "GET",
autoFetch: true,
retry: 3,
debounce: 500,
});

if (loading) return

Loading...

{JSON.stringify(data, null, 2)}

#### FormData Example (File Upload)
`tsx
function FileUpload() {
const { data, loading, error, refetch } = useDataFetcher({
url: "https://api.example.com/upload",
method: "POST",
body: new FormData(),
headers: { "Authorization": "Bearer token" },
});

return Upload;
}
`

#### WebSocket Example
`tsx
function WebSocketExample() {
const { wsData, sendMessage, closeWebSocket } = useDataFetcher({
wsUrl: "wss://example.com/socket",
});

return (


#### useDataFetcher(options: UseHttpOptions)
##### Options
| Property | Type | Default | Description |
|--------------|-----------------------|---------|-------------|
| url | string | "" | The API endpoint to fetch data from. |
| method | 'GET' | 'POST' | 'PUT' | 'DELETE' | 'GET' | The HTTP method to use. |
| body | any | null | Request payload (supports JSON & FormData). |
| headers | Record | {} | Additional request headers. |
| queryParams | Record | {} | URL query parameters. |
| autoFetch | boolean | true | Automatically fetch data on mount. |
| retry | number | 0 | Number of times to retry on failure. |
| debounce | number (ms) | 300 | Delay before making a request. |
| autoRefresh | number (ms) | 0 | Interval for auto-refreshing data. |
| baseUrl | string | "" | Base URL for requests. |
| credentials | boolean | false | Include credentials in requests. |
| wsUrl | string | "" | WebSocket URL (disables HTTP fetch). |

##### Return Value
| Property | Type | Description |
|-----------------|------------|-------------|
| data | T | null | Response data. |
| loading | boolean | Indicates loading state. |
| error | string | null | Error message if request fails. |
| refetch | () => void | Function to manually refetch data. |
| cancel | () => void | Cancel an ongoing request. |
| wsData | any | Latest WebSocket message. |
| sendMessage | (message: any) => void | Sends a message over WebSocket. |
| closeWebSocket | () => void | Closes the WebSocket connection. |
| wsState | "connecting" or "open" or "closed" or "error" | Websocket connection status |

#### createDataFetcher(defaultOptions: UseHttpOptions)
Returns a custom useFetcher hook with preconfigured options.

`tsx
const useCustomFetcher = createDataFetcher({ baseUrl: "https://api.example.com" });
const { data } = useCustomFetcher({ url: "/posts" });
`

$3

$3

$3