0.0.3 • Published 2 years ago

promise-bs-dialogs v0.0.3

Weekly downloads
-
License
GPLv3
Repository
github
Last release
2 years ago

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

Confirm 1 Confirm 2

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:

propertytypedescriptiondefault
titlestringTitle that will be shown in the modal header'Confirm'
messagestringMessage that will be shown in the modal body'Are you sure you want to do this?'
centeredbooleanSpecifies if the modal should be vertically alignedtrue
size'small' \| 'default' \| 'large' \| 'extra-large'Specifies the size of the modal'default'
fadebooleanEnables or disables the fade transition of the modaltrue
closeOnBackdropClickbooleanSpecifies if the modal should close on backdrop clicktrue
closeOnEscbooleanSpecifies if the modal should close on ESC presstrue
focusbooleanSpecifies if the focus should be put on the modaltrue
confirmTextstringText that will appear on the confirm button'Confirm'
confirmClassstringClass that the confirm button will have'btn-primary'
cancelTextstringText that will appear on the cancel buttonCancel
cancelClassstringClass 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
});

Alert 1 Alert 2

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

Options:

propertytypedescriptiondefault
titlestringTitle that will be shown in the modal header'Confirm'
messagestringMessage that will be shown in the modal body'Are you sure you want to do this?'
centeredbooleanSpecifies if the modal should be vertically alignedtrue
size'small' \| 'default' \| 'large' \| 'extra-large'Specifies the size of the modal'default'
fadebooleanEnables or disables the fade transition of the modaltrue
closeOnBackdropClickbooleanSpecifies if the modal should close on backdrop clicktrue
closeOnEscbooleanSpecifies if the modal should close on ESC presstrue
focusbooleanSpecifies if the focus should be put on the modaltrue
confirmTextstringText that will appear on the confirm button'Confirm'
confirmClassstringClass that the confirm button will have'btn-primary'
cancelTextstringText that will appear on the cancel buttonCancel
cancelClassstringClass that the cancel button will have'btn-secondary'