Fetch-Loader-React

Fetch-Loader-React is a simple and lightweight React Component which allows you to display a custom loader while fetching assynchronously one or more requests.

• Supports fetch api and axios
• Supports multiple ansynchronous fetches
• Requires React 16.8.0 or above

See an example using multiple fetches with fetch api and axios.

Installation

npm i fetch-loader-react

How to use

import FetchLoader from 'fetch-loader-react';

Using Fetch API

const fetchPromise1 = fetch('https://jsonplaceholder.typicode.com/todos/1'));
const fetchPromise2 = fetch('https://jsonplaceholder.typicode.com/todos/1'));

<FetchLoader fetch={ [fetchPromise1, fetchPromise2] } type="json">
    {
        ({ loading, err, res }) => {
            if (loading) return <YourLoader />
            if (err) {
                console.error(err);
                return;
            }
            return <YourComponent res={res} />;
        }
    }
</FetchLoader>

Using Axios

const axiosPromise1 = axios.get('https://jsonplaceholder.typicode.com/todos/1'));
const axiosPromise2 = axios.get('https://jsonplaceholder.typicode.com/todos/1'));

<FetchLoader fetch={ [axiosPromise1, axiosPromise2] }>
    {
        ({ loading, err, res }) => {
            if (loading) return <YourLoader />
            if (err) {
                console.error(err);
                return;
            }
            return <YourComponent res={res} />;
        }
    }
</FetchLoader>

Props

Name	Type	Values	Description
fetch	Object	Promise	The fetch or axios promise
type	String	'json', 'text', 'blob', 'arrayBuffer', 'formData'	The type of the fetched data. Must not be provided when using axios.

Authors

• Marc Leonetti
• Sven Mathieu