reactjs-overlay-loader

Simple overlay loader for React. Overlay on part of page or entire page

Install

yarn add reactjs-overlay-loader

Or

npm install --save reactjs-overlay-loader

Simple Overlay on the entire page

import React from "react";

import ReactOverlayLoader from "reactjs-overlay-loader";

const App = () => {
  return (
    <ReactjsOverlayLoader isActive>
      The easiest way to use overlay
    </ReactjsOverlayLoader>
  );
};

Simple Overlay on parts of the page

import React from "react";

import ReactOverlayLoader from "reactjs-overlay-loader";

const App = () => {
  return (
    <div style={{ position: "relative" }}>
      <ReactjsOverlayLoader
        style={{
          position: "absolute"
        }}
        isActive
      >
        The easiest way to use overlay
      </ReactjsOverlayLoader>
    </div>
  );
};

Customized Overlay

import React from "react";

import ReactOverlayLoader from "reactjs-overlay-loader";

const App = () => {
  return (
    <ReactjsOverlayLoader
      loaderContent={<span style={{ color: "#ffffff" }}> Please wait...</span>}
      isActive
      style={{
        backgroundColor: "rgba(233, 30, 99, 0.81)"
      }}
    >
      The easiest way to use overlay
    </ReactjsOverlayLoader>
  );
};

Various loader options

Spinning, Audio, BallTriangle, Bars, Circles, Grid, Hearts, Oval, Puff, Rings, TailSpin, ThreeDots

API

Select props

| name | description | type | default | | ------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: | ---------: | | isActive | enable or disable overlay | boolean | false | | style (optional) | you can provide your custom style | object | {} | | loaderContent (optional) | text/content need to be visible below loading icon | string or jsx | Loading... | | iconType (optional) | multiple loading icon options are available Spinning, Audio, BallTriangle, Bars, Circles, Grid, Hearts, Oval, Puff, Rings, TailSpin, ThreeDots | string | Spinning | | icon (optional) | you can provide your custom icon | jsx | svg |

License

MIT © anilbad