An easy way to represent nested data

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.

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.

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.

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