React-global-loading NPM

React Global Loading

React simple global loading package

Installation

With Yarn:

yarn add react-global-loading

With npm:

npm install --save react-global-loading

Getting Started

Add the GlobalLoading to your app first (should be at root component like index.js or app.js). It will take care of rendering global loading . Now you can trigger globalLoading.show() and globalLoading.hide() from anywhere!

import { GlobalLoading, showLoading } from 'react-global-loading';

const App = () => {
  const show = () => {
    showLoading(true);
    setTimeout(() => {
      showLoading(false);
    }, 1000);
  };

  return (
    <div>
      <button onClick={show}>Show Loading</button>
      <GlobalLoading />
    </div>
  );
};

Other way to trigger loading

import { showLoading } from 'react-global-loading';
showLoading(true); // show
showLoading(false); // hide

import { show, hide } from 'react-global-loading';
show(); // show
hide(); // hide

import { globalLoading } from 'react-global-loading';
globalLoading.show(); // show
globalLoading.hide(); // hide

Available Loaders, PropTypes, and Default Values

Default props:

  children: React.ReactNode;
  WrapperComponent?: (props: any) => ReactElement;
  backgroundColor?: string;
  loadingSize?: number;
  loadingColor?: string;
  loadingType?:
    | 'spin'
    | 'bars'
    | 'bubbles'
    | 'cubes'
    | 'cylon'
    | 'spin'
    | 'spinningBubbles'
    | 'spokes';

`children` prop

children will replace default loading icon

<GlobalLoading>
  <ReactLoading /> // OR your custom loading component
<GlobalLoading/>

`WrapperComponent` prop

The wrapper component ( background screen )

<GlobalLoading WrapperComponent={() => <div style={style} />} />;

// suggested style
style = {
  position: 'fixed',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  width: '100vw',
  height: '100vh',
  backgroundColor: 'rgba(0, 0, 0, 0.6)',

  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center'
};