react-promise-loader
v1.2.0
Published
This is a NPM package with a component for React that will help you display the loader at use react-promise-tracker
Downloads
647
Maintainers
Readme
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.