react-loading-randomizable

📘 About

A component for ReactJS which render overlay transparent screen, loading element and text label together as one.

Disclaimer: All of loading elements source code on this package are based on react-loadingg such as BabelLoading, BatteryLoading, and more.

⚙ Install

yarn add react-loading-randomizable
# or alternate npm way `npm install react-loading-randomizable`

📌 Example Usage

import { useState } from "react";
import { OverlayLoading } from "react-loading-randomizable";

const App = () => {
  const [loading, setLoading] = useState(true);

  const handleClick = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  };

  return (
    <>
      <OverlayLoading active={loading} />
      <button onClick={handleClick}>
        Click for show overlay loading for 3 seconds
      </button>
    </>
  );
}

export default App;

📋 Properties

| Property | Description | Type | Default | |-------------------|-------------------------------------------------------------|-----------------------|-------------| | active | to make loading overlay invisible, set it false | bool | true | | number | a specific index of loading element, see more a below table | number | -1 | | style | custom style of container element | React.CSSProperties | {} | | className | custom className of container element | string | "" | | text | text render alongside with loading element | React.ReactNode | "" | | textStyle | custom style of text element | React.CSSProperties | {} | | textClassName | custom className of text element | string | "" |

📝 Need More Example?

• Document with Online Demo: Demo
• or alternate example link: CodeSandbox

🙋 FAQ?

FAQ 1: What's the difference between this package and the original (react-loadingg)?

To inform you, I love the original package so much and appreciate them for creating such a useful package, but it has passed a long year since the last commit, so I want to resurrect it with an upgraded version of React, randomizable element on each render, and the overlay loading screen as the default.

FAQ 2: List of add-on features.

1. Overlay screen (black screen with 70% transparency)
2. Randomly render a loading element, but you can also be specific with your favorite one.
3. Supported React 18.
4. TypeScript on the new source code; leave JavaScript on the loading element (from the library) with no changes.

FAQ 3: I want to ask you more.

Please feel free to create an issue on GitHub. I would love to answer all of the questions, and I am also welcome for all the PR. ❤️

𝌡 Changelog

Please see more CHANGELOG.md

⚒ Thanks a lot

• react-loadingg
• react-loadinggg