layerpro
Version:
The real custom modals, alert, confirm, prompt... for your browser
218 lines (155 loc) • 5.52 kB
Markdown
# [LayerPro](https://npmjs.com/package/layerpro)
Drop-in replacement for browser modals with superpowers.
[](https://npmjs.org/package/layerpro)
[](https://packagephobia.now.sh/result?p=layerpro)
[](https://npmjs.org/package/layerpro)
[](https://snyk.io/test/npm/layerpro)
[](https://socket.dev/npm/package/layerpro)
## 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
```bash
npm install layerpro
```
Or use directly in HTML:
```html
<script src="https://cdn.jsdelivr.net/npm/layerpro"></script>
```
## Quick Start
Import LayerPro once in your app entry point:
```javascript
import "layerpro";
```
That's it. Now you have `alert()`, `confirm()`, `prompt()`, and `message()` globally.
## Usage
### Basic Modals
```javascript
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
```javascript
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:
```jsx
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
```typescript
{
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](https://socket.dev/npm/package/dphelper)
- [Snyk Security Report](https://security.snyk.io/package/npm/dphelper)
## License
MIT License
## Credits
Copyrigth (c) [Dario Passariello](https://dario.passariello.ca/)