reactjs-overlay-loader's Introduction

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