Nouveau Papier Mâché

    doodle-popup
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.11 • Public • Published

    Doodle Popup

    npm size downloads license

    Promise based custom popups as alternative to browser default alert, confirm, and prompt dialogs.

    It is developed using TypeScript and Lit.

    Doodle Popups are native web components. Doodle Popups work anywhere you use HTML, with any framework or none at all.

    Demo

    Installation

    Using jsDelivr CDN:

    <script src="https://cdn.jsdelivr.net/npm/doodle-popup/dist/doodle-popup.js"></script>

    Using unpkg CDN:

    <script src="https://unpkg.com/doodle-popup"></script>

    Examples

    DoodlePopup.toast('This is Doodle Toast!')
      .show()
      .then(() => {
        console.log('Toast closed');
      });
    
    DoodlePopup.alert('This is Doodle Alert!')
      .show()
      .then(() => {
        console.log('Alert closed');
      });
    
    DoodlePopup.confirm('This is Doodle Confirm!')
      .show()
      .then((value) => {
        // value: boolean
        console.log(`Confirm value ${value}`);
      });
    
    DoodlePopup.prompt('This is Doodle Prompt!')
      .show()
      .then((value) => {
        // value: string
        console.log(`Prompt value ${value}`);
      });

    Parameters

    function alert(
      message?: string, // default ''
      position?: string // default 'center'
    ): DoodleAlert { ... }
    
    function confirm(
      message?: string, // default ''
      position?: string // default 'center'
    ): DoodleConfirm { ... }
    
    function prompt(
      message?: string, // default ''
      position?: string // default 'center'
    ): DoodlePrompt { ... }
    
    function toast(
      message?: string, // default ''
      position?: string // default 'bottom'
      duration?: number // default 3000
    ): DoodleToast { ... }
    
    function show(): Promise<boolean | string | null> { ... }
    
    function close(value: boolean | string | null): void { ... }

    Development

    # Get source
    $ git clone https://github.com/asissuthar/doodle-popup.git
    $ cd doodle-popup
    
    # Install packages
    $ yarn
    
    # Start development server
    $ yarn serve
    
    # Production build
    $ yarn prod

    License

    MIT

    Copyright (c) 2021-present, Ashish Suthar

    Install

    npm i doodle-popup

    DownloadsWeekly Downloads

    3

    Version

    1.0.11

    License

    MIT

    Unpacked Size

    99.1 kB

    Total Files

    48

    Last publish

    Collaborators

    • asissuthar