/react-promise-loader

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

Primary LanguageJavaScriptMIT LicenseMIT

react-promise-loader

Version Build Coverage Minified size Downloads PRs Welcome Tested with jest

Table of contents

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.