1.0.1 • Published 9 months ago
@dakataa/bootstrap-alert v1.0.1
Bootstrap Alert
This library is Bootstrap Framework extension that helps you to create beautiful Alert and Confirm popups, based on Bootstrap Modals.
How to install
Using npm:
npm install @dakataa/bootstrap-alert
Using yarn:
yarn add @dakataa/bootstrap-alert
How to use it
1. Import the library
import Alert, {Icon} from "@dakataa/bootstrap-alert";2. Create Alert Instance and show it
const config = {
title: 'Well done!',
icon: Icon.success
};
const instance = new Alert(config);
instance.show().then((result) => {
console.log('successed', result);
}).catch((result) => {
console.log('cancelled or denied', result)
});Configuration
| Key | Required | Type | Default | Description |
|---|---|---|---|---|
| title | Yes | string | No | Text or HTML |
| text | No | string | null | Text or HTML |
| icon | No | Icon Enum, Promise or string | null | Animated Lottie Icon |
| animation | No | Animation Enum or string | Animation.scale | |
| size | No | Size Enum or string | Size.small (sm) | Popup size |
| actions | No | Object (key: Action) | null | Action Buttons |
| allowClose | No | Boolean | false | Preventing the Popup from closing except if there is no actions defined |
| timeout | No | Integer | null | Automatically closing after number of milliseconds |
| timeoutProgress | No | Boolean | false | Display Timeout Progress bar |
Methods
| Method | Return | Description |
|---|---|---|
| show | Promise | Display popup based on configuration |
| hide | void | Hide popup |
| getHTMLElement | HTMLElement or undefined | Returns Modal HTML Element |
| getBootstrapModalInstance | Bootstrap Modal instance or undefined |
Icon Enum
Icon Enum is an object contains import Promises of default Lottie Animations.
| Key | Description |
|---|---|
| success | Success animation |
| denied | Denied Animation |
| warning | Warning Animation |
| success | Success Animation |
How to use it
import {Icon} from "@dakataa/bootstrap-alert";
new Alert({title: 'Success', icon: Icon.success}).show();How to use custom icon
const customIconAnimation = import('path/to/lottie.json');
new Alert({title: 'Custom Icon Animation', icon: customAnimation}).show();or
new Alert({title: 'Custom Icon Animation', icon: 'public/path/to/lottie.json'}).show();Examples
TODO