1.0.7 • Published 5 years ago
fetch-loader-react v1.0.7
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