overlay-loading-react

React-Overlay-Loading

Installation

  npm install overlay-loading-react

Quick start:

import OverlayLoader from "./components/Loader";

<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>
        <CustomLoader />  // 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.

Authors

• @muhazzib

🔗 Links