promise-bs-dialogs

Simple library that allows you to easily create promise-based confirm/alert dialogs using Bootstrap

Tested with Bootstrap 5.1, although it should work with some other versions

Requires Bootstrap's JS plugin: bootstrap.min.js or bootstrap.bundle.min.js

How to install:

npm install promise-bs-dialogs

Confirm

import { confirm } from 'promise-bs-dialogs';

confirm('Delete this?').then(result => {
  if(result) {
    // do something
  }
});

confirm({
  title: 'Delete user',
  message: `Are you sure you want to delete the user "${user.name}"? This can't be undone`,
  confirmText: 'Delete',
  confirmClass: 'btn-danger',
}).then(result => {
  if(result) {
    // do something
  }
});

The promise is resolved with a boolean value after the user closes the modal, that value will be true if the user clicks the confirm button, and false if the user clicks the cancel button or closes the modal in some other way like clicking outside the modal or pressing ESC (can be controlled by the options below)

Options:

property	type	description	default
title	string	Title that will be shown in the modal header	'Confirm'
message	string	Message that will be shown in the modal body	'Are you sure you want to do this?'
centered	boolean	Specifies if the modal should be vertically aligned	true
size	'small' | 'default' | 'large' | 'extra-large'	Specifies the size of the modal	'default'
fade	boolean	Enables or disables the fade transition of the modal	true
closeOnBackdropClick	boolean	Specifies if the modal should close on backdrop click	true
closeOnEsc	boolean	Specifies if the modal should close on ESC press	true
focus	boolean	Specifies if the focus should be put on the modal	true
confirmText	string	Text that will appear on the confirm button	'Confirm'
confirmClass	string	Class that the confirm button will have	'btn-primary'
cancelText	string	Text that will appear on the cancel button	Cancel
cancelClass	string	Class that the cancel button will have	'btn-secondary'

Alert

import { alert } from 'promise-bs-dialogs';

alert('Something happened!').then(() => {
  // do something
});

alert({
  title: 'Something complex happened!!',
  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
}).then(() => {
  // do something
});

The promise is resolved with void after the user closes the modal

Options:

property	type	description	default
title	string	Title that will be shown in the modal header	'Confirm'
message	string	Message that will be shown in the modal body	'Are you sure you want to do this?'
centered	boolean	Specifies if the modal should be vertically aligned	true
size	'small' | 'default' | 'large' | 'extra-large'	Specifies the size of the modal	'default'
fade	boolean	Enables or disables the fade transition of the modal	true
closeOnBackdropClick	boolean	Specifies if the modal should close on backdrop click	true
closeOnEsc	boolean	Specifies if the modal should close on ESC press	true
focus	boolean	Specifies if the focus should be put on the modal	true
confirmText	string	Text that will appear on the confirm button	'Confirm'
confirmClass	string	Class that the confirm button will have	'btn-primary'
cancelText	string	Text that will appear on the cancel button	Cancel
cancelClass	string	Class that the cancel button will have	'btn-secondary'