Doodle-popup NPM

Doodle Popup

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