useResource
A set of simple utilities for declarative async resource fetching.
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
npm install @leancloud/use-resourceExample
First, create a hook for fetch:
import { createResourceHook } from '@leancloud/use-resource';
async function fetchJSON<T>(...args: Parameters<typeof fetch>) {
return (await (await fetch(...args)).json()) as T;
}
const useFetch = createResourceHook(fetchJSON);use useFetch in the Clock component:
const Clock = () => {
const [data, { error, loading, reload }] = useFetch<{ datetime: string }>([
"https://worldtimeapi.org/api/timezone/etc/utc"
]);
return (
<div>
<p>Current Time:</p>
<p>
{loading && "Loading..."}
{error && error.message}
{data && data.datetime}
</p>
<button onClick={reload}>Reload</button>
</div>
);
};
Advanced usage
Currently there is an introduction available in Chinese: