1.1.0 โข Published 4 years ago
@leancloud/use-resource v1.1.0
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-resource
Example
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:
ใ็จ React Hook ็้ฃๆ ผๅ ่ฝฝๆฐๆฎใ
๐ง We are working on the translation.