https://github.com/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
https://github.com/awibox/react-promise-loader
loader loader-component npm-package promise-tracker react-component
Last synced: about 1 year ago
JSON representation
This is NPM package with a component for React that will help you display the loader at use react-promise-tracker
- Host: GitHub
- URL: https://github.com/awibox/react-promise-loader
- Owner: awibox
- License: mit
- Created: 2020-01-25T08:54:53.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-17T10:54:09.000Z (about 1 year ago)
- Last Synced: 2025-04-11T18:23:55.082Z (about 1 year ago)
- Topics: loader, loader-component, npm-package, promise-tracker, react-component
- Language: JavaScript
- Homepage:
- Size: 1.49 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-promise-loader)
[](https://github.com/awibox/react-promise-loader/actions)
[](https://coveralls.io/github/awibox/react-promise-loader?branch=master)
[](https://github.com/awibox/react-promise-loader/blob/master/LICENSE)
[](https://www.npmjs.com/package/react-promise-loader)
[](https://github.com/awibox/react-promise-loader/pulls)
[](https://github.com/facebook/jest)
## Table of contents
* [Installation](#installation)
* [Getting started](#gettingstarted)
* [The settings of the component](#settings)
* [Contributing](#contributing)
## Installation
You need to install promise loader and promise tracker packages:
```bash
npm install react-promise-loader react-promise-tracker
```
You can use yarn:
```bash
yarn add react-promise-loader react-promise-tracker
```
## Getting started
Wrap promises that you would like to track as in the following example:
```diff
+ 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:
```diff
+ import { usePromiseTracker } from 'react-promise-tracker';
+ import Loader from 'react-promise-loader';
const App = () => (
...
+
);
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](/.github/CONTRIBUTING.md).