useFetch

GitHub MDN Docs

Custom hook that provides a wrapper around the native fetch API to handle HTTP requests with state management, abort capability, and TypeScript support.

Installation

npx sse-hooks add use-fetch

yarn dlx sse-hooks add use-fetch

pnpm dlx sse-hooks add use-fetch

deno run -A npm:sse-hooks add use-fetch

bunx sse-hooks add use-fetch

Usage

example.ts

import { useFetch } from "./{hooks file}";

interface User {
  id: number;
  name: string;
}

const { data, loading, error, execute } = useFetch<User>(
  "https://api.example.com/user/1",
  {
    immediate: true,
    onSuccess: (data) => console.log("User loaded:", data),
  },
);

API

Parameters

Prop	Default	Type
`options`	`{}`	`UseFetchOptions` Options for customizing the request and hook behavior (optional).
`url`	-	`string` The URL to fetch.

Returns

Return Value	Default	Type
`abort`	-	`() => void` Aborts the current request if it is pending.
`data`	-	`T \| null` The data received from the response, or null if not yet received.
`error`	-	`Error \| null` The error object if the request failed, or null if successful.
`execute`	-	`(url: string, options: RequestInit) => Promise<T \| null>` Manually triggers the fetch request.
`loading`	-	`boolean` Indicates if the request is currently in progress.
`reset`	-	`() => void` Resets the state to its initial values (data: null, loading: false, error: null).

Types Aliases

UseFetchState

The state representation of the fetch request.

Property	Type
`data`	`T \| null` The data received from the response, or null if not yet received.
`error`	`Error \| null` The error object if the request failed, or null if successful.
`loading`	`boolean` Indicates if the request is currently in progress.

Changelog

c165d — feat: enhance useRoleGuard and useSSR hooks with additional options and documentation

30da4 — feat: add new hooks and their metadata

cf13e — feat: add custom hooks for step navigation, ternary dark mode, timeout, toggle, unmount, and window size

useCookie

Custom hook that manages state synchronized with a browser `cookie`. It handles serialization, prefixes, updates across tabs, and custom event synchronization.

useNetworkInformation

Custom hook that tracks the device's network connection status and details (speed, type) using the Network Information API.