customreactloading

A customizable React loading spinner component packaged for npm.

Installation

npm install customreactloading

Usage

//Basic Usage
import React from "react";
import LoadingSpinner from "customreactloading";

function App() {
  return (
    <div>
      <LoadingSpinner />
    </div>
  );
}

export default App;

//Advanced Usage
import React from "react";
import LoadingSpinner from "customreactloading";

function App() {
  return (
    <div>
      <LoadingSpinner size={60} color="dodgerblue" thickness={5} speed={0.8} label="Loading..." fullScreen={false} overlay={false} />
    </div>
  );
}

export default App;
//fullscreen
<LoadingSpinner
  fullScreen
  overlay
  label="Please wait..."
/>

Props

    | Prop | Type | Default | Description |
    |------|------|---------|-------------|
    | size | number | 40 | Width and height of the spinner (px) |
    | color | string | dodgerblue | Spinner border color |
    | thickness | number | 4 | Spinner border thickness |
    | speed | number | 1 | Animation duration in seconds |
    | label | string | "" | Optional loading text |
    | fullScreen | boolean | false | Displays the spinner centered on the viewport |
    | overlay | boolean | false | Adds a semi-transparent fullscreen overlay |
    | className | string | "" | Custom CSS class |
    | style | object | {} | Additional inline styles |

Development

npm install
npm run build

Build Output

The compiled bundle is written to dist/main.js.

Package Details

• Entry: src/index.js
• Component: src/App.js
• CSS: src/App.css
• Bundler: webpack
• Transpiler: Babel

Notes

• react and react-dom are marked as peer dependencies.
• The package is intended for React 18+.