iziToast

https://marcelodolza.github.io/iziToast/
Admin
iziToast is an elegant, responsive and lightweight notification plugin with no dependencies that...
Tokens:2,976
Snippets:32
Trust Score:9.7
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install iziToast via Bower

Source: https://marcelodolza.github.io/iziToast

Use this command to install iziToast using the Bower package manager.

```bash
bower install izitoast
```

--------------------------------

### Install iziToast via NPM

Source: https://marcelodolza.github.io/iziToast

Use this command to add iziToast to your project dependencies.

```bash
npm install izitoast --save
```

--------------------------------

### iziToast.show()

Source: https://marcelodolza.github.io/iziToast

Displays a notification toast with customizable options.

```APIDOC
## iziToast.show()

### Description
Displays a notification toast based on the provided configuration object.

### Method
JavaScript Function Call

### Parameters
#### Request Body
- **class** (string) - Optional - The class applied to the toast.
- **title** (string) - Optional - Title of the toast.
- **message** (string) - Optional - Message of the notification.
- **theme** (string) - Optional - 'light' or 'dark'.
- **color** (string) - Optional - Hexadecimal color or predefined theme (blue, red, green, yellow).
- **icon** (string) - Optional - Icon class.
- **timeout** (number) - Optional - Duration in milliseconds before closing.
- **position** (string) - Optional - 'bottomRight', 'bottomLeft', 'topRight', 'topLeft', 'topCenter', 'bottomCenter', or 'center'.
- **progressBar** (boolean) - Optional - Enable timeout progress bar.
- **overlay** (boolean) - Optional - Enable overlay layer.

### Request Example
{
  "title": "Hello",
  "message": "This is a notification",
  "color": "blue",
  "position": "topRight"
}
```

--------------------------------

### Basic iziToast implementation

Source: https://marcelodolza.github.io/iziToast

Display a simple notification using the iziToast.show method.

```javascript
iziToast.show({
    title: 'Hey',
    message: 'What would you like to add?'
});
```

--------------------------------

### iziToast.show

Source: https://marcelodolza.github.io/iziToast

Opens a new toast notification with custom options.

```APIDOC
## iziToast.show

### Description
Displays a toast notification on the screen.

### Request Example
iziToast.show({
    theme: 'dark',
    icon: 'icon-person',
    title: 'Hey',
    message: 'Welcome!',
    position: 'center',
    progressBarColor: 'rgb(0, 255, 184)',
    buttons: [
        ['<button>Ok</button>', function (instance, toast) { alert("Hello world!"); }, true],
        ['<button>Close</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOutUp' }, toast, 'buttonName');
        }]
    ]
});
```

--------------------------------

### Display a Question Toast with Custom Buttons

Source: https://marcelodolza.github.io/iziToast

Use this to ask users a question with predefined button responses. Configure timeout, overlay, and button actions.

```javascript
iziToast.question({
    timeout: 20000,
    close: false,
    overlay: true,
    displayMode: 'once',
    id: 'question',
    zindex: 999,
    title: 'Hey',
    message: 'Are you sure about that?',
    position: 'center',
    buttons: [
        ['<button><b>YES</b></button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }, true],
        ['<button>NO</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
        }],
    ],
    onClosing: function(instance, toast, closedBy){
        console.info('Closing | closedBy: ' + closedBy);
    },
    onClosed: function(instance, toast, closedBy){
        console.info('Closed | closedBy: ' + closedBy);
    }
});
```

--------------------------------

### Listen for Toast Opening Event

Source: https://marcelodolza.github.io/iziToast

Capture the 'iziToast-opening' event to perform actions just before a toast appears. You can filter by toast class or ID.

```javascript
// You can compare by any option (id, class, etc...)
document.addEventListener('iziToast-opening', function(data){
    // data.detail will bring all toast settings.
    if(data.detail.class == 'test'){
        console.info('EventListener iziToast-opening');
    }
});
```

--------------------------------

### Listen for Toast Opened Event

Source: https://marcelodolza.github.io/iziToast

Capture the 'iziToast-opened' event to execute code after a toast has fully appeared. Useful for post-display logic.

```javascript
document.addEventListener('iziToast-opened', function(data){
    if(data.detail.class == 'test'){
        console.info('EventListener iziToast-opened');
    }
});
```

--------------------------------

### Include iziToast CSS

Source: https://marcelodolza.github.io/iziToast

Add the stylesheet to the head section of your HTML document.

```html
<!-- <link rel="stylesheet" href="iziToast.min.css"> -->
```

--------------------------------

### Include iziToast JS

Source: https://marcelodolza.github.io/iziToast

Include the JavaScript file before your closing script tags.

```html
<!-- <script src="iziToast.min.js" type="text/javascript"></script> -->
```

--------------------------------

### Configure Global Settings

Source: https://marcelodolza.github.io/iziToast

Sets default values for all toasts using the settings method.

```javascript
iziToast.settings({
    timeout: 10000,
    resetOnHover: true,
    icon: 'material-icons',
    transitionIn: 'flipInX',
    transitionOut: 'flipOutX',
    onOpening: function(){
        console.log('callback abriu!');
    },
    onClosing: function(){
        console.log("callback fechou!");
    }
});
```

--------------------------------

### iziToast.settings

Source: https://marcelodolza.github.io/iziToast

Sets the default configuration values for all toast notifications.

```APIDOC
## iziToast.settings

### Description
Configures global default settings for toast notifications.

### Request Example
iziToast.settings({
    timeout: 10000,
    resetOnHover: true,
    icon: 'material-icons',
    transitionIn: 'flipInX',
    transitionOut: 'flipOutX',
    onOpening: function(){ console.log('callback abriu!'); },
    onClosing: function(){ console.log("callback fechou!"); }
});
```

--------------------------------

### iziToast.progress

Source: https://marcelodolza.github.io/iziToast

Controls the progress bar of a specific toast.

```APIDOC
## iziToast.progress

### Description
Provides methods to reset, pause, resume, or start the progress bar of a toast.

### Request Example
var toast = document.querySelector('.iziToast');
iziToast.progress({}, toast).reset();
iziToast.progress({}, toast).pause();
iziToast.progress({}, toast).resume();
iziToast.progress({}, toast).start();
```

--------------------------------

### Listen for Toast Closing Event

Source: https://marcelodolza.github.io/iziToast

Capture the 'iziToast-closing' event to run code as the toast is disappearing. Allows for pre-removal actions.

```javascript
document.addEventListener('iziToast-closing', function(data){
    if(data.detail.class == 'test'){
        console.info('EventListener iziToast-closing');
    }
});
```

--------------------------------

### Show a Toast

Source: https://marcelodolza.github.io/iziToast

Displays a toast notification with custom content and interactive buttons.

```javascript
iziToast.show({
    theme: 'dark',
    icon: 'icon-person',
    title: 'Hey',
    message: 'Welcome!',
    position: 'center', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter
    progressBarColor: 'rgb(0, 255, 184)',
    buttons: [
        ['<button>Ok</button>', function (instance, toast) {
            alert("Hello world!");
        }, true], // true to focus
        ['<button>Close</button>', function (instance, toast) {
            instance.hide({
                transitionOut: 'fadeOutUp',
                onClosing: function(instance, toast, closedBy){
                    console.info('closedBy: ' + closedBy); // The return will be: 'closedBy: buttonName'
                }
            }, toast, 'buttonName');
        }]
    ],
    onOpening: function(instance, toast){
        console.info('callback abriu!');
    },
    onClosing: function(instance, toast, closedBy){
        console.info('closedBy: ' + closedBy); // tells if it was closed by 'drag' or 'button'
    }
});
```

--------------------------------

### Handle User Inputs in a Toast

Source: https://marcelodolza.github.io/iziToast

Integrate input fields like checkboxes, text, or number inputs directly into toasts. Listen for specific events like 'change', 'keyup', or 'keydown'.

```javascript
iziToast.info({
    timeout: 20000,
    overlay: true,
    displayMode: 'once',
    id: 'inputs',
    zindex: 999,
    title: 'Inputs',
    message: 'Examples',
    position: 'center',
    drag: false,
    inputs: [
        ['<input type="checkbox">', 'change', function (instance, toast, input, e) {
            console.info(input.checked);
        }],
        ['<input type="text">', 'keyup', function (instance, toast, input, e) {
            console.info(input.value);
        }, true],
        ['<input type="number">', 'keydown', function (instance, toast, input, e) {
            console.info(input.value);
        }],
    ]
});
```

--------------------------------

### Predefined Toast Types

Source: https://marcelodolza.github.io/iziToast

Displays specialized toast notifications for common scenarios.

```javascript
iziToast.info({
    title: 'Hello',
    message: 'Welcome!',
});
```

```javascript
iziToast.success({
    title: 'OK',
    message: 'Successfully inserted record!',
});
```

```javascript
iziToast.warning({
    title: 'Caution',
    message: 'You forgot important data',
});
```

```javascript
iziToast.error({
    title: 'Error',
    message: 'Illegal operation',
});
```

--------------------------------

### iziToast Default Options Configuration

Source: https://marcelodolza.github.io/iziToast

This snippet shows the default configuration object for iziToast. Customize properties like title, message, theme, position, and animations to control toast behavior and appearance.

```javascript
iziToast.show({
    id: null,
    class: '',
    title: '',
    titleColor: '',
    titleSize: '',
    titleLineHeight: '',
    message: '',
    messageColor: '',
    messageSize: '',
    messageLineHeight: '',
    backgroundColor: '',
    theme: 'light', // dark
    color: '', // blue, red, green, yellow
    icon: '',
    iconText: '',
    iconColor: '',
    iconUrl: null,
    image: '',
    imageWidth: 50,
    maxWidth: null,
    zindex: null,
    layout: 1,
    balloon: false,
    close: true,
    closeOnEscape: false,
    closeOnClick: false,
    displayMode: 0, // once, replace
    position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
    target: '',
    targetFirst: true,
    timeout: 5000,
    rtl: false,
    animateInside: true,
    drag: true,
    pauseOnHover: true,
    resetOnHover: false,
    progressBar: true,
    progressBarColor: '',
    progressBarEasing: 'linear',
    overlay: false,
    overlayClose: false,
    overlayColor: 'rgba(0, 0, 0, 0.6)',
    transitionIn: 'fadeInUp',
    transitionOut: 'fadeOut',
    transitionInMobile: 'fadeInUp',
    transitionOutMobile: 'fadeOutDown',
    buttons: {},
    inputs: {},
    onOpening: function() {},
    onOpened: function() {},
    onClosing: function() {},
    onClosed: function() {}
});
```

--------------------------------

### iziToast.hide

Source: https://marcelodolza.github.io/iziToast

Closes a specific toast notification.

```APIDOC
## iziToast.hide

### Description
Closes a specific toast instance.

### Request Example
var toast = document.querySelector('.iziToast');
iziToast.hide({ transitionOut: 'fadeOutUp' }, toast);
```

--------------------------------

### Listen for Toast Closed Event

Source: https://marcelodolza.github.io/iziToast

Capture the 'iziToast-closed' event to perform actions after a toast has been completely removed. Includes information on how it was closed.

```javascript
document.addEventListener('iziToast-closed', function(data){
    if(data.detail.class == 'test'){
        console.info('EventListener iziToast-closed');
        console.info('closedBy:', data.detail.closedBy);
    }
});
```

--------------------------------

### Control Progress Bar

Source: https://marcelodolza.github.io/iziToast

Manages the progress bar timing for a specific toast.

```javascript
var toast = document.querySelector('.iziToast'); // Selector of your toast
iziToast.progress({}, toast).reset();  // Reset progress bar time
iziToast.progress({}, toast).pause();  // Pause progress bar time
iziToast.progress({}, toast).resume();  // Resume progress bar time
iziToast.progress({}, toast).start();  // Pause progress bar time
// Full example
iziToast.progress(options, toast, callback).start();
```

--------------------------------

### iziToast.destroy

Source: https://marcelodolza.github.io/iziToast

Destroys all active toast notifications.

```APIDOC
## iziToast.destroy

### Description
Removes all currently visible toasts from the DOM.

### Request Example
iziToast.destroy();
```

--------------------------------

### Hide a Toast

Source: https://marcelodolza.github.io/iziToast

Closes a specific toast instance using a selector.

```javascript
var toast = document.querySelector('.iziToast'); // Selector of your toast
iziToast.hide({}, toast);
// Or make new settings
iziToast.hide({
    transitionOut: 'fadeOutUp'
}, toast);
```

--------------------------------

### Destroy All Toasts

Source: https://marcelodolza.github.io/iziToast

Removes all active toast notifications from the screen.

```javascript
iziToast.destroy();
```
Tokens:
Raw