awibox/react-promise-loader

This is NPM package with a component for React that will help you display the loader at use react-promise-tracker

Table of contents

• Installation
• Getting started
• The settings of the component
• Contributing

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

Contributing

Please read through our CONTRIBUTING.md.