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.

react-promise-loader's Issues

React 18 support

Can package.json be updated to support React/React-DOM 18?

We currently have to use the --force flag when running npm install to get around the dependency issue

npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   15 more (@ramonak/react-progress-bar, @react-aria/ssr, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^17.0.1" from [email protected]
npm WARN node_modules/react-promise-loader
npm WARN   react-promise-loader@"^1.2.0" from the root project
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^17.0.1" from [email protected]
npm WARN   node_modules/react-promise-loader
npm WARN     react-promise-loader@"^1.2.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN   react-dom@"^18.2.0" from the root project
npm WARN   6 more (@ramonak/react-progress-bar, @restart/ui, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^17.0.1" from [email protected]
npm WARN node_modules/react-promise-loader
npm WARN   react-promise-loader@"^1.2.0" from the root project
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^17.0.1" from [email protected]
npm WARN   node_modules/react-promise-loader
npm WARN     react-promise-loader@"^1.2.0" from the root project

Thanks!

Use peerDependencies for react

Configuring the package

Update package.json

Updating badges in README.md

Update README.md

Switch the build to npm

Fix a security issue

Fix typo in description

Please add support to add custom z-index

Is your feature request related to a problem? Please describe.
Z-Index Problem with other elements like Bootstrap modal

Describe the solution you'd like
Ability to add z-index in the props

Switching to Github Actions

Functionality for the Loader component

React 17 support