react-fetchable

Data fetching in React the functional way powered by TypeScript, io-ts & fp-ts

Usage no npm install needed!

<script type="module">
  import reactFetchable from 'https://cdn.skypack.dev/react-fetchable';
</script>

README

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.