layerpro/README.md

Custom modals, alert, confirm, prompt... by Dario Passariello

# [LayerPro](https://npmjs.com/package/layerpro)

![layerpro](https://raw.githubusercontent.com/passariello/container/be0611e9bead336dcec32d522d103e7e3661f502/layerpro/assets/logos/logo.svg)

[![version](https://img.shields.io/npm/v/layerpro.svg)](https://npmjs.org/package/layerpro)
[![downloads](https://img.shields.io/npm/dm/layerpro.svg)](https://npmjs.org/package/layerpro)

[![GitBook](https://img.shields.io/static/v1?message=Documented%20on%20GitBook&logo=gitbook&logoColor=ffffff&label=%20&labelColor=5c5c5c&color=3F89A1)](https://a51.gitbook.io/layerpro)

## About

LayerPro offers a completely new way to customize web modals in your application. With LayerPro, you can create custom alerts, prompts, confirmations, and messages, effectively replacing the default browser modals.

## Live demo

[https://tests.a51.dev/](https://tests.a51.dev/)

You can view an HTML version demonstrating how dpHelper and LayerPro work together. These tools can be used with HTML, React, Vue, or any other frontend framework/library.

---


## Install for react + webpack projects

```js
npm i layerpro --save-dev
```

or update:

```js
npm i layerpro@latest --save-dev
```

in the index (and only there):

```js
import "layerpro";
```

or

```js
require("layerpro");
```

## Install for ejs or other type of projects (like html)

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

## How to use it

ype layerpro in your console to explore all the available tools you can use globally! You can call these tools from anywhere without needing to import them (just include the import once in your index file).

For example, if you type **alert("hello, world!")**, you can see the result.

You can also use these tools as messages directly from the console.

```js
alert("Hello world"); // Normal alert

prompt("Your Name"); // Ask for input

confirm(
  "Hello world",
  ()=>console.log("hello"), // callback for YES / OK
  ()=>console.log("bye") // callback for NO / CANCEL (you can use null if you don't want CB)
);

message(
  "Hello world",
  ()=>console.log("This happen after OK") // callback for YES / OK)
);
```

Example:

```js
import 'layerpro'

// EXAMPLE WITH ALL OPTIONS
function App() {

  layerpro.popup.open(
    {
      id: 'exampleModal',
      body: 'Example',
      name: 'example',
      icon: '&#9888;',

      buttons: {
        confirm: {
          text: "accept",
          cb: (e) => message("confirmed")
        },
        cancel: {
          text: "cancel"
        }
      },

      width: 400,
      height: 300,
      maxWidth: 500,
      maxHeight: 350,
      minWidth: 200,
      minHeight: 150,
      top: '10%',
      left: '10%',
      right: 'auto',
      bottom: 'auto',

      fadeIn: 500,
      fadeOut: 500,
      timer: 0,

      iconize: true,
      maximize: true,
      close: true,
      isMaximize: false,
      dockable: false,
      raised: true,
      movable: true,
      resizable: false,
      store: false
    }
  )
}

export default App

```

Example with a React component:

```js

// Example using React Component

import React from "react"
import 'layerpro'

export default () => {

  // Custom Component6
  const TestApp = () => {
    return (
      <div>
        Hello
        <label>
          Alert: <input type="button" value="Alert" onClick={() => alert("Hello")} />
        </label>
      </div>
    )
  }

  // Run into layerpro
  layerpro.popup.open(
    {
      id: 'exampleModal',
      body: TestApp(),
      buttons: {
        confirm: {
          text: "accept",
          cb: () => {
            message("confirmed")
          }
        },
        cancel: {
          text: "cancel",
          cb: () => {
            alert("cancelled")
          }
        }
      },
      width: 350,
      height: 300,
      name: 'example',
      icon: '&#9888;',
      iconize: true,
      maximize: true,
      close: true,
      isMaximize: false,
      dockable: false,
      raised: true,
      movable: true,
      resizable: false,
      store: false,
      top: '10%',
      left: '10%',
      right: 'auto',
      bottom: 'auto',
      minWidth: 200,
      minHeight: 150,
      fadeIn: 500,
      fadeOut: 500,
      timer: 0
    }
  )

}
```

copyright (c) 2019 - 2025 by Dario Passariello