0.0.2 • Published 4 years ago
fetch-hooks-react v0.0.2
FETCH HOOKS REACT
React hooks for fetching multiple or single resources.
Typescript enabled.
Small. 554 bytes (minified and gzipped). No dependencies. Size Limit controls the size.
Installation
Install it with yarn:
yarn add fetch-hooks-react
Or with npm:
npm i fetch-hooks-react --save
Usage
Exports two hooks fetchMany
and fetchSingle
(see below). Both return an object with the following keys:
data
the data returned by the resource(s).fetchMany
will return the data separated by keys.isLoading
, a boolean value, that lets you know if the request(s) are still being made.error
any error returned from the resource(s). This is an extension of the jsError
class, and includes two more propertiesstatus
andstatusText
that come straight from the response.
fetchMany
Fetches multiple resources.
Params:
An array of IFetchParams:
interface IFetchParams {
url: RequestInfo;
options?: RequestInit;
key: string;
dependsOn?: boolean[];
}
url
is the resource you want to fetch.options
are the fetch options.key
is the key you want this to return in thedata
object.dependsOn
is an optional array of boolean variables on which making the request depends on. If the array exists and at least one value is false, the request will not be made untill all values are true.
Example
// .tsx file
import React, { FC } from "react";
import { fetchMany } from "fetch-hooks-react";
interface ITodo {
userId: number;
id: number;
title: string;
completed: boolean;
}
const MyComponent: FC = () => {
const doIt = true;
const { data, isLoading, error } = fetchMany<{ todoList: ITodo[], singleTodo: ITodo>([
{ url: "https://jsonplaceholder.typicode.com/todos", options: { method: "GET" }, key: "todoList" },
{ url: "https://jsonplaceholder.typicode.com/todos/1", options: { method: "GET" }, key: "singleTodo", dependsOn: [doIt] }
]);
if (isLoading) {
return <div>Loading...</div>;
} else if (error || !data) {
return <div>Unexpected error: {error.message}</div>;
}
return (
<div>{JSON.stringify(data.todoList)}</div>
<div>{JSON.stringify(data.singleTodo)}</div>
);
}
export default MyComponent;
fetchSingle
Fetches multiple resources.
Params:
- A
url
is the resource you want to fetch. - fetch options.
dependsOn
is an optional array of boolean variables on which making the request depends on. If the array exists and at least one value is false, the request will not be made untill all values are true.
Example
// .tsx file
import React, { FC } from "react";
import { fetchSingle } from "fetch-hooks-react";
interface ITodo {
userId: number;
id: number;
title: string;
completed: boolean;
}
const MyComponent: FC = () => {
const doIt = true;
const { data, isLoading, error } = fetchMany<ITodo>("https://jsonplaceholder.typicode.com/todos/1", { method: "GET" }, [doIt]);
if (isLoading) {
return <div>Loading...</div>;
} else if (error) {
return <div>Unexpected error: {error.message}</div>;
}
return (
<div>{JSON.stringify(data)}</div>
);
}
export default MyComponent;