LayerPro

Drop-in replacement for browser modals with superpowers.

What is LayerPro?

LayerPro replaces the boring browser alert(), confirm(), and prompt() with beautiful, customizable modals that work everywhere.

No more ugly popup boxes. No more blocking the main thread. Just clean, modern modals that your users will love.

Features

• Multiple modal types: alert, confirm, prompt, message
• Fully customizable: appearance, behavior, animations
• Dockable windows: minimize modals to a dock bar
• Draggable & Resizable: users can move and resize
• Smooth animations: fade in/out transitions
• XSS protection: built-in HTML sanitization
• TypeScript support: full type definitions

Installation

npm install layerpro

Or use directly in HTML:

<script src="https://cdn.jsdelivr.net/npm/layerpro"></script>

Quick Start

Import LayerPro once in your app entry point:

import "layerpro";

That's it. Now you have alert(), confirm(), prompt(), and message() globally.

Usage

Basic Modals

alert("Hello World!");

confirm("Are you sure?", () => {
  console.debug("User clicked YES");
});

prompt("What's your name?", (name) => {
  console.debug("User entered:", name);
});

message("Operation complete!");

Custom Popups

layerpro.popup.open({
  id: 'myModal',
  name: 'My Modal',
  body: '<p>Your content here</p>',
  width: 450,
  height: 350,
  buttons: {
    confirm: { text: "OK", cb: () => {} },
    cancel: { text: "Cancel", cb: () => {} }
  }
});

React Components

In a React environment, you can pass React components directly:

layerpro.popup.open({
  id: 'reactModal',
  name: 'React Modal',
  body: <MyComponent />,   // React element
  width: 500,
  height: 400
});

The body Parameter

The body property accepts different content types:

| Type | Example | |------|---------| | Plain text | body: "Hello" | | HTML string | body: "<p>Hello</p>" | | React element | body: <Component /> |

Note: In React, always use elements (<Component />), not function calls (Component()).

Options

{
  id: string,           // Unique ID
  body: any,            // Content (text, HTML, or React)
  name: string,         // Modal title
  icon: string,         // Icon (HTML entity)

  // Dimensions
  width: number,
  height: number,
  minWidth: number,
  minHeight: number,
  maxWidth: number,
  maxHeight: number,

  // Position
  top: number | string,
  left: number | string,
  right: number | string,
  bottom: number | string,

  // Animation
  fadeIn: number,
  fadeOut: number,
  timer: number,

  // Features
  movable: boolean,
  resizable: boolean,
  maximize: boolean,
  iconize: boolean,
  dockable: boolean,
  close: boolean,
  raised: boolean,

  // Buttons
  buttons: {
    confirm?: { text: string; cb?: () => void },
    cancel?: { text: string; cb?: () => void }
  }
}

Methods

| Method | Description | |--------|-------------| | layerpro.popup.open(props) | Open a modal | | layerpro.popup.close(id) | Close a modal | | layerpro.popup.center(id) | Center modal | | layerpro.popup.maximize(id) | Maximize modal | | layerpro.popup.iconize(id) | Minimize to dock | | layerpro.popup.movable(id) | Enable drag | | layerpro.popup.resizable(id) | Enable resize |

Browser Support

Chrome 80+ • Firefox 75+ • Safari 13+ • Edge 80+

We take security seriously. Every release is audited:

• Socket.dev Audit
• Snyk Security Report

License

MIT License

Credits

Copyrigth (c) Dario Passariello