React loading overlay - NPM package

🚀 Exciting News: My New NPM Package is LIVE! 🚀

I'm thrilled to announce the release of my latest NPM package — "loading-overlay-react" — a lightweight, customizable, and easy-to-integrate React component for adding stylish loading overlays to your applications! 🎉

💡 What is loading-overlay-react?

It's a simple yet powerful loading overlay component designed to provide a smooth user experience when handling async operations like data fetching, form submissions, or any background process. No more manually building loading states — just drop in the component, configure a few props, and you're good to go!

⚙️ Key Features:

✅ Customizable Icons: Easily pass in your custom icons, including Font Awesome icons, and control their appearance via a style prop.

✅ Dynamic Text: Customize loading messages based on context.

✅ Style Flexibility: Modify the background color, z-index, font styles, colors, and more!

✅ Smooth User Experience: Ensure users are visually aware that something is processing, with no extra effort.

✅ Simple & Lightweight: Fast to set up and uses minimal resources, making it perfect for any size application.

💻 How to Install?

Install the package via NPM:

npm install loading-overlay-react        

🔧 Usage Example:

import LoadingOverlay from 'loading-overlay-react';

<LoadingOverlay
  show={loading}
  icon={<i className="fa-solid fa-spinner fa-2x"></i>}
  text="Loading data..."
  backgroundColor="rgba(0, 0, 0, 0.6)"
  zIndex="1000000"
  style={{
    color: "white",
    fontSize: "1.0rem",
    fontWeight: "bold",
  }}
/>        

📝 Check it Out:

You can explore the full documentation and install it from NPM here: https://www.npmjs.com/package/loading-overlay-react

Live demo: https://stackblitz.com/edit/react-obverlay-loading?file=index.html,src%2FApp.jsx

🙌 Why Should You Try It?

• Speed up development: Focus on your core app features while loading-overlay-react handles the loading states.
• Customization freedom: No limits to how you can style and personalize your overlay.
• Great for async-heavy apps: Perfect for #React applications that frequently deal with data #loading.

Would love to hear your thoughts and feedback! Feel free to give it a try, and let me know how it helps improve your app's user experience.