react-declarative-fetch v1.0.4

REACT-DECLARATIVE-FETCH

What

A Declarative Way To Make HTTP Requests in React.

Why

The process of making external API requests in a react component often repeats itself and I found myself handling the same state changes in different components to many times.
For example, showing a <Loader /> component while fetching and taking into account the different responses from the API i.e Error or Success.

How

In most cases, when making an async external call from a component you will want to account for three different phases in the request lifecycle:

1. Fetching
2. Success
3. Error

REACT-DECLARATIVE-FETCH aims to give a dead simple and declarative API for handling the different state changes in an API call.

example

npm i react-declarative-fetch

import { Fetch } from 'react-declarative-fetch';
const ImageGallery = () => {
  return (
    <Fetch url="https://www.someImageApiUrl">
      <Fetch.Error>Error while loading the images</Fetch.Error>
      <Fetch.Fetching>show loader</Fetch.Fetching>
      <Fetch.Success>
        {({ data }) => data.map(img => <Image {...img} />)}
      </Fetch.Success>
    </Fetch>
  );
};

more examples

Each of the compound components will only get rendered when the appropriate state is set, i.e when fetching <Fetch.Fetching> will get rendered and at the end of the request either <Fetch.Success> or <Fetch.Error> will get rendered.

API

Both <Fetch.Success> and <Fetch.Error> can be used as a render props and they will be invoked with the current state.
The <Fetch> component can also be used alone as a render props component and will be invoked with the current state.

Props

State - render props components will be invoked with the state object

TODO

expose reset cache api outside of the component.
add examples and use cases.
move to the native fetch instead of axios.