React-promise-loader NPM

react-promise-loader

Installation

You need to install promise loader and promise tracker packages:

npm install react-promise-loader react-promise-tracker

You can use yarn:

yarn add react-promise-loader react-promise-tracker

Getting started

Wrap promises that you would like to track as in the following example:

+ import { trackPromise} from 'react-promise-tracker';
//...

+ trackPromise(
    fetchUsers(); // You function that returns a promise
+ );

Then you need to add the Loader component and send data from the react-promise-tracker:

+ import { usePromiseTracker } from 'react-promise-tracker';
+ import Loader from 'react-promise-loader';

const App = () => (
  <div className="app">
    ...
+     <Loader promiseTracker={usePromiseTracker} color={'#3d5e61'} background={'rgba(255,255,255,.5)'} />
  </div>
);
export default App;

The settings of the component

Parameter	Type	Description	Default
background	string	Sets the color for the background in any format that supports css	`rgba(255,255,255,.5)`
color	string	Sets the color of the spinner	`#000`
promiseTracker	boolean	You need to set `usePromiseTracker` function from the `react-promise-tracker`	`false`
loading	boolean	If you need to run the loader without tracking promises you should set `true`	`false`
zIndex	number	You can change the z-index to distribute the layers correctly	`999`