Overlay Locker 🔒

A lightweight TypeScript library to lock websites with a customizable full-page overlay message.
Useful for unpaid invoices 💸, maintenance 🚧, or temporarily blocking access.

---

✨ Features

• 🟢 Works in any JavaScript framework (React, Vue, Angular, Next.js, or plain JS).
• ⚡ Install via npm or use via CDN <script>.
• 🔒 Blocks all user interaction with the page behind the overlay.
• 🎨 Fully customizable: background color, text color, font size.
• ⏱ Optional auto-hide with a time duration.
• 🛡 Shadow DOM isolates overlay from main DOM, making it harder to remove.
• 📘 Written in TypeScript with full type definitions.

---

📦 Installation

NPM

npm install overlay-locker

CDN

<script src="https://cdn.jsdelivr.net/npm/overlay-locker/dist/overlay-locker.js"></script>

---

🚀 Usage

In Plain HTML / JavaScript

<script src="https://cdn.jsdelivr.net/npm/overlay-locker/dist/overlay-locker.js"></script>
<script>
  OverlayLocker.show({
    message: "Access blocked. Please contact the developer.",
    contact: "Email: [email protected]",
    duration: 5000 // auto-hide after 5 seconds
  });

  // To hide manually
  OverlayLocker.hide();
</script>

HTML / CDN

<script src="https://cdn.jsdelivr.net/npm/overlay-locker/dist/overlay-locker.js"></script>
<script>
  OverlayLocker.show({
    message: "Maintenance mode",
    contact: "Contact: [email protected]",
    duration: 5000
  });
</script>

In React / Vue / Next.js / Angular:

import OverlayLocker from "overlay-locker";

// Show overlay
OverlayLocker.show({
  message: "This website is locked until payment is completed.",
  contact: "Contact: [email protected]",
  style: {
    backgroundColor: "rgba(255, 0, 0, 0.85)",
    color: "#fff",
    fontSize: "22px"
  },
  duration: 5000 // auto-hide after 5 seconds
});

// Hide overlay manually
OverlayLocker.hide();

---

📖 API Reference

OverlayLocker.show(options)

Displays the overlay with your custom settings.

Options:

interface OverlayOptions {
  message?: string;  // Default: "This site is currently locked."
  contact?: string;  // Default: ""
  style?: {
    backgroundColor?: string; // Default: "rgba(0,0,0,0.85)"
    color?: string;           // Default: "#fff"
    fontSize?: string;        // Default: "18px"
  };
  duration?: number;  // Optional: time in milliseconds to auto-hide the overlay
}

OverlayLocker.hide()
Removes the overlay immediately.

---

⚡ Notes

The overlay is isolated in the Shadow DOM; casual users cannot easily remove it via dev tools.

Server-side frameworks (like Next.js App Router) require client-side code. Wrap calls in "use client"; components or useEffect.

Anything running in the browser can ultimately be bypassed, so for critical features, consider server-side checks.

---

📝 License

This project is licensed under the MIT License.

👤 Author

Okiemute Godstime Egokiphovwen 🐦 Twitter/X: @egokiemute

---