reactjs-overlay-loader v1.0.4

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

License

MIT © anilbad