npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

layerpro

v0.9.0

Published

Custom popups, alert, confirmn, prompt... by Dario Passariello

Downloads

383

Readme

I am LayerPro

LayerPro by Dario Passariello

TypeScript

Socket Badge layerpro

About

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

Please make sure to read the LICENSE agreement before implementing it in your application.

Live demo

https://a51.dev/tests/

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

npm i layerpro --save-dev

or update:

npm i layerpro@latest --save-dev

in the index (and only there):

import "layerpro";

or

require("layerpro");

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

<script src="https://unpkg.com/layerpro@latest/index.js"></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.

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

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

confirm(
  "Hello world",
  ()=>console.log("ciao"), // 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)
);

Popup:

import 'layerpro';

layerpro.popup.open(
  {
    id: String,
    body: String | Component / Module, // text or component

    buttons: {
      confirm: {
        text: "accept", // customizable
        cb: yourFunctionCallBack() // call your script
      },
      cancel: {
        text: "cancel", // customizable
        cb: yourFunctionCallBack() // optional
    }, // optional

    width: Number,
    height: Number,
    name: String,
    icon: "&#9888;", // or from html symbols table
    iconize: true | false,
    maximize: true | false,
    close: true | false,
    isMaximize: true | false,
    dockable: true | false,
    raised: true | false,
    movable: true | false,
    resizable: true | false,
    store: true | false,
    top: Number | Percentance,
    left: Number | Percentance,
    right: Number | Percentance,
    bottom: Number | Percentance,
    minWidth: Number | Percentance,
    minHeight: Number | Percentance,
    fadeIn: 0, // Milliseconds
    fadeOut: 0, // Milliseconds
    timer: 0 // Milliseconds
  }
);

Example:

import 'layerpro'

// EXAMPLE WITH ALL OPTIONS
function App() {

  layerpro.popup.open(
    {
      id: 'examplePopup',
      body: 'Example',
      buttons: {
        confirm: {
          text: "accept",
          cb: (e) => message("confirmed")
        },
        cancel: {
          text: "cancel"
        }
      },
      width: 400,
      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
    }
  )

}

export default App

Here are some of the main advantages of using LayerPro:

Complete Customization: LayerPro allows you to create highly customized web pop-ups, surpassing the limitations of standard browser pop-ups. You can configure every aspect of the pop-up, including size, position, icons, and much more.

Improved User Interface: With LayerPro, you can create alerts, prompts, confirmations, and personalized messages that seamlessly integrate with your application's design, enhancing the user experience.

Compatibility with Various Frameworks: LayerPro is compatible with HTML, React, Vue, and other frontend frameworks and libraries, making it extremely versatile and easy to integrate into any project.

Ease of Use: Once LayerPro is imported into your project, you can access all its features globally without needing additional imports. This simplifies the development process and reduces boilerplate code.

Advanced Features: LayerPro offers advanced options such as the ability to maximize, resize, move, and dock pop-ups. You can also configure fade-in and fade-out effects for a smoother experience.

Override Browser Pop-ups: LayerPro allows you to replace browser pop-ups with customized versions, eliminating the unattractive look of default pop-ups and providing complete control over the appearance and behavior of your messages.

Component Support: You can use components or modules as the body of your pop-ups, allowing you to create complex and interactive user interfaces within the pop-ups themselves.


copyright (c) 2019 - 2024 by Dario Passariello