https://github.com/leancloud/use-resource

A set of simple utilities for declarative async resource fetching.
https://github.com/leancloud/use-resource

fetch hook react request

Last synced: 6 months ago
JSON representation

A set of simple utilities for declarative async resource fetching.

• Host: GitHub
• URL: https://github.com/leancloud/use-resource
• Owner: leancloud
• License: mit
• Created: 2020-11-28T13:28:19.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-01-27T04:40:30.000Z (about 5 years ago)
• Last Synced: 2025-09-22T12:27:52.757Z (6 months ago)
• Topics: fetch, hook, react, request
• Language: TypeScript
• Homepage:
• Size: 450 KB
• Stars: 8
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# useResource 

A set of simple utilities for declarative async resource fetching.

![npm](https://flat.badgen.net/npm/v/@leancloud/use-resource)

![bundle size](https://flat.badgen.net/bundlephobia/minzip/@leancloud/use-resource)

![ci status](https://img.shields.io/github/workflow/status/leancloud/use-resource/CI?style=flat-square)

![code cov](https://flat.badgen.net/codecov/c/github/leancloud/use-resource)

## Features

- 🧾 Declarative, intuitive and minimal core API

- ⚛ Atomic, composable enhancement hooks

- 🔌 Protocol agnostic

- 💪 Written in TypeScript

- 🌲 Small size (~1KB gzipped) and tree-shaking ready

## Install

```bash

npm install @leancloud/use-resource

```

## Example

First, create a hook for `fetch`:

```tsx

import { createResourceHook } from '@leancloud/use-resource';

async function fetchJSON(...args: Parameters) {

  return (await (await fetch(...args)).json()) as T;

}

const useFetch = createResourceHook(fetchJSON);

```

use `useFetch` in the `Clock` component:

```tsx

const Clock = () => {

  const [data, { error, loading, reload }] = useFetch<{ datetime: string }>([

    "https://worldtimeapi.org/api/timezone/etc/utc"

  ]);

  return (

    


      
Current Time:

      


        {loading && "Loading..."}

        {error && error.message}

        {data && data.datetime}

      

      Reload

    

  );

};

```

[![Edit use-resource-prototype](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/use-resource-prototype-i5wys?fontsize=14&hidenavigation=1&theme=dark&view=preview)


## Advanced usage

Currently there is an introduction available in Chinese:

[《用 React Hook 的风格加载数据》](https://www.notion.so/React-Hook-076214bf3d0d48b59220e9f702d9b879)

🚧 We are working on the translation.