react-fetchable
v1.0.0 react data fetching loading
react-fetchable
Data fetching in React the functional way powered by TypeScript, io-ts & fp-ts
What is this?
This small library uses the encoding and decoding capabilities of io-ts and the algebraic data types of [fp-ts[(https://github.com/gcanti/fp-ts) to provide developers with a type-safe and declarative data fetching API for React applications:
<Fetchable
url="/data/schedule.json"
validator={ActivityArrayValidator}
loading={() => <div>Loading...</div>}
error={(e: Error) => <div>Error: {e.message}</div>}
success={(data: IActivityArray) => {
return (
<Table
headers={["Time", "Activity"]}
rows={data.map(a => [`${a.startTime}`, a.title])}
/>
);
}}
/>
Motivation
Loading data in React it is a very repetitive and tedious task. If that wasn't bad enough, the data contained in an HTTP response could be completely different from what we are expecting.
The type-unsafe nature of fetch calls is particularly dangerous for TypeScript users because it compromises many of the benefits of TypeScript.
Installation
You can install this module using npm:
npm install io-ts fp-ts react-fetchable
You can then import it as follows:
import { Fetchable } from "react-fetchable";
Options
Prop | Description |
---|---|
url |
The URI of the resource to be loaded |
validator |
A value of the io-ts type Type<A, O, I> |
loading |
Provides the JSX to be rendered while the resource is loading. |
error |
Provides the JSX to be rendered if the data loaded and validated incorrectly. |
success |
Provides the JSX to be rendered if the data loaded and validated correctly. |
init |
An instance of RequestInit that can be used to configure the fetch call. |