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}`);
  });

Using with async/wait

async function getFullName() {
  const firstName = await DoodlePopup.prompt('Enter First Name').show();

  const lastName = await DoodlePopup.prompt('Enter Last Name').show();

  const fullName = `${firstName} ${lastName}`;

  await DoodlePopup.toast(fullName).show();

  return fullName;
}

getFullName().then((fullName) => {
  console.log(`Your full name is ${fullName}`);
});

Parameters

// position: string = 'top' | 'center' | 'bottom'

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

Doodle Popup is licensed under a MIT License.

asissuthar / doodle-popup