Overlay Locker 🔒

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

✨ Features

• 🟢 Works in any JavaScript project (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
• ⏱️ Time-based overlay: automatically hides after a specified duration
• 🎨 Customizable: background color, text color, font size, and more
• 📘 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 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();

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>

📖 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.

📝 License

This project is licensed under the MIT License.

👤 Author

Okiemute Godstime Egokiphovwen 🐦 Twitter/X: @egokiemute