Overlay-loading-react NPM

React-Overlay-Loading

Installation

  npm install overlay-loading-react

Quick start:

import OverlayLoader from "overlay-loading-react";

<OverlayLoader loadingText='Loading...' active />

Variants

Custom Loader:

Custom loader can be used in form of GIF and React Elements as well.

import OverlayLoader from "./components/Loader";

const App = () => {
  return (
    <OverlayLoader>
        <MyComponent />  // Your Loader
    </OverlayLoader>
  );
}

Props:

active (boolean)
- default: true
onClick (function)
- default: undefined - click handler for the overlay when active.
overlayContainerStyle (object)
- default: {} - inline styling for overlay main container.
contentContainerStyle (object)
- default: {} - inline styling for content container.
loadingTextStyle (object)
- default: {} - inline styling for loading text if provided.
loadingText (string)
- default: undefined - the text to render in the loader overlay when active.
variant (string)
- default: spinner - The type of loading to show.