# use-fetched-state

> A simple yet convenient `fetch` + `useState` wrapper. 100% TS. Less than 100 LOC. 0 dependencies.

Latest version **2.37.0** (published 2024-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-fetched-state
pnpm add use-fetched-state
yarn add use-fetched-state
bun add use-fetched-state
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.37.0 |
| Published | 2024-11-16 |
| First published | 2021-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 28 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kipras Melnikovas |
| Maintainers | kipras |

## Links

- npm: https://www.npmjs.com/package/use-fetched-state
- Repository: https://github.com/kiprasmel/turbo-schedule
- Homepage: https://github.com/kiprasmel/turbo-schedule/tree/master/use-fetched-state#readme
- Issues: https://github.com/kiprasmel/turbo-schedule/issues
- npm.io page: https://npm.io/package/use-fetched-state

## Recent versions

- 2.37.0 (latest) — 2024-11-16
- 2.35.1 — 2024-04-30
- 2.35.0 — 2024-04-29
- 2.34.1 — 2024-04-27
- 2.34.0 — 2024-04-27
- 2.33.0 — 2023-08-22
- 2.32.1 — 2022-05-28
- 2.31.1 — 2021-12-29
- 2.31.0 — 2021-12-08
- 2.30.3 — 2021-10-23
- 2.30.2 — 2021-09-19
- 2.30.1 — 2021-09-19
- 2.30.0 — 2021-09-19
- 2.29.0 — 2021-09-19
- 2.28.3 — 2021-09-07
- … 3 more at https://npm.io/package/use-fetched-state/versions

## README

# use-fetched-state

<a href="https://www.npmjs.com/package/use-fetched-state">
    <img alt="npm package" src="https://img.shields.io/npm/v/use-fetched-state">
</a>

<p style="margin:1.5em 0;">
A simple yet convenient `fetch` + `useState` wrapper. 100% TS. Less than 200 LOC. 0 dependencies.
<!-- SLOC, ofc, but it doesn't sound as smooth -->
</p>

Please [submit PRs / create issues](https://github.com/kiprasmel/turbo-schedule/tree/master/use-fetched-state) if (simple) functionality missing.

## Example

```ts
import React, { FC } from "react";
import { createUseFetchedState } from "use-fetched-state";

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

const getDefaultUser = (): IUser => ({ name: "", id: -1 });

const useFetchedUser = createUseFetchedState<{ user?: IUser }, IUser, number>(
    (id) => `/api/v1/user/${id}` /** can also be just a string */,
    (data) => data.user ?? getDefaultUser()
);

const User: FC = () => {
    const [user, setUser, isLoading] = useFetchedUser(
        () => getDefaultUser() /** (get) initial state */,
        [] /** dependencies to trigger re-fetch */,
        {
            /** option(s) for the URL creator: */
            urlCtx: 1,
            /** options: */
            fetchOpts: {} /** AbortController setup & enabled by default */,
            shouldFetch: (ctx) => true /** true by default, but controllable here */,
            onError: (e, ctx) => console.error(e),
            onSuccess: (u, ctx) => console.info(`fetched user ${u.name}`),
            onSetState: async (ctx) => {} /** potentially up-sync the new state to the API */
        }
    );

    if (isLoading) return null;

    return <h1>hello, {user.name}</h1>;
};

```

## License

[MIT](./LICENSE)

---
_Source: https://npm.io/package/use-fetched-state · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._