### Install iziToast via Package Managers

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

Commands to install the iziToast library using popular JavaScript package managers.

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

```bash
bower install izitoast
```

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

### Initialize Basic Notification

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

A basic example of how to trigger a notification using the iziToast.show method with a title and message.

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

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

### Control Toast Progress Bar

Source: https://context7.com/marcelodolza/izitoast/llms.txt

Provides methods to manipulate the timer of a toast notification, including pausing, resuming, resetting, and starting the progress bar.

```javascript
var toast = document.querySelector('.iziToast');

// Pause the timeout
iziToast.progress({}, toast).pause();

// Resume the timeout
iziToast.progress({}, toast).resume();

// Reset the timeout to original value
iziToast.progress({}, toast).reset();

// Start the timeout (if was reset)
iziToast.progress({}, toast).start();

// Full example with options and callback
iziToast.progress({
    timeout: 8000,
    progressBarEasing: 'ease'
}, toast, function() {
    console.log('Progress callback executed');
}).start();
```

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

### Manage Toast Progress Bar

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

Control the progress bar of an active toast notification. Methods include reset, pause, resume, and start, requiring a reference to the toast element.

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

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

### Initialize iziToast with Default Options

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

Demonstrates the structure of the iziToast.show() method with all available configuration parameters. This object allows for full customization of the toast's visual style, positioning, and event callbacks.

```javascript
iziToast.show({
	id: null,
	class: '',
	title: '',
	titleColor: '',
	titleSize: '',
	titleLineHeight: '',
	message: '',
	messageColor: '',
	messageSize: '',
	messageLineHeight: '',
	backgroundColor: '',
	theme: 'light',
	color: '',
	icon: '',
	iconText: '',
	iconColor: '',
	iconUrl: null,
	image: '',
	imageWidth: 50,
	maxWidth: null,
	zindex: null,
	layout: 1,
	balloon: false,
	close: true,
	closeOnEscape: false,
	closeOnClick: false,
	displayMode: 0,
	position: 'bottomRight',
	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 () {}
});
```

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

### Create Question Toast with Buttons

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

Displays a toast with custom action buttons and lifecycle callbacks. Useful for user confirmation prompts.

```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>YES</button>', function (instance, toast) {
			instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
		}, true],
		['<button>NO</button>', function (instance, toast) {
			instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
		}]
	]
});
```

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

### Handle Toast Inputs

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

Creates a toast containing input fields with event listeners for user interaction.

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

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

### Configure iziToast Display and Behavior Options

Source: https://context7.com/marcelodolza/izitoast/llms.txt

A comprehensive configuration object for the iziToast.show method, allowing full customization of appearance, animation, timing, and interactive elements like buttons or inputs.

```javascript
iziToast.show({
    id: null,
    class: '',
    title: '',
    titleColor: '',
    titleSize: '',
    titleLineHeight: '',
    message: '',
    messageColor: '',
    messageSize: '',
    messageLineHeight: '',
    backgroundColor: '',
    theme: 'light',
    color: '',
    icon: '',
    iconText: '',
    iconColor: '',
    iconUrl: null,
    image: '',
    imageWidth: 50,
    maxWidth: null,
    zindex: null,
    layout: 1,
    balloon: false,
    close: true,
    closeOnEscape: false,
    closeOnClick: false,
    displayMode: 0,
    position: 'bottomRight',
    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 () {}
});
```

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

### Define Transition Animations in iziToast

Source: https://context7.com/marcelodolza/izitoast/llms.txt

Shows how to customize the entry and exit animations for toast notifications using 'transitionIn' and 'transitionOut' properties. Various bounce, fade, and flip effects are available.

```javascript
iziToast.show({
    title: 'Bounce',
    message: 'Bouncing from the left',
    transitionIn: 'bounceInLeft',
    transitionOut: 'fadeOutRight'
});

iziToast.show({
    title: 'Flip',
    message: 'Flipping animation',
    transitionIn: 'flipInX',
    transitionOut: 'flipOutX'
});
```

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

### Listen to Toast Opening Event

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

Attaches an event listener to the document to capture the 'iziToast-opening' event, allowing access to toast settings via the detail property.

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

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

### Configure Toast Positions in iziToast

Source: https://context7.com/marcelodolza/izitoast/llms.txt

Demonstrates how to set the position of toast notifications on the screen using the 'position' property. Supported values include various bottom, top, and center alignments.

```javascript
// Bottom positions
iziToast.info({ message: 'Bottom Right', position: 'bottomRight' });
iziToast.info({ message: 'Bottom Left', position: 'bottomLeft' });
iziToast.info({ message: 'Bottom Center', position: 'bottomCenter' });

// Top positions
iziToast.info({ message: 'Top Right', position: 'topRight' });
iziToast.info({ message: 'Top Left', position: 'topLeft' });
iziToast.info({ message: 'Top Center', position: 'topCenter' });

// Center position
iziToast.info({ message: 'Center', position: 'center' });
```

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

### Create Interactive Toasts with Inputs

Source: https://context7.com/marcelodolza/izitoast/llms.txt

Generates a toast containing form elements like checkboxes or text inputs. Allows binding event listeners to capture user input values.

```javascript
iziToast.info({
    timeout: 20000,
    overlay: true,
    displayMode: 'once',
    id: 'inputs',
    zindex: 999,
    title: 'Inputs',
    message: 'Please fill out the form',
    position: 'center',
    drag: false,
    inputs: [
        ['<input type="checkbox">', 'change', function (instance, toast, input, e) {
            console.info('Checkbox checked:', input.checked);
        }],
        ['<input type="text" placeholder="Enter name">', 'keyup', function (instance, toast, input, e) {
            console.info('Text value:', input.value);
        }, true], // true = auto-focus this input
        ['<input type="number" min="0" max="100">', 'keydown', function (instance, toast, input, e) {
            console.info('Number value:', input.value);
        }],
    ]
});
```

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

### Display Custom Notifications with iziToast.show()

Source: https://context7.com/marcelodolza/izitoast/llms.txt

The primary method for rendering highly customized notifications, including support for buttons, callbacks, and specific UI themes.

```javascript
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',
                onClosing: function(instance, toast, closedBy){
                    console.info('closedBy: ' + closedBy);
                }
            }, toast, 'buttonName');
        }]
    ],
    onOpening: function(instance, toast){
        console.info('Toast is opening');
    },
    onClosing: function(instance, toast, closedBy){
        console.info('closedBy: ' + closedBy);
    }
});
```

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

### Display Interactive Question Toast with iziToast

Source: https://context7.com/marcelodolza/izitoast/llms.txt

Creates a modal-style toast requiring user interaction via buttons. It supports custom callbacks for closing events and pre-configured styling.

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

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

### Configure Global iziToast Settings

Source: https://context7.com/marcelodolza/izitoast/llms.txt

Sets default behaviors for all future toast notifications. This ensures consistency across the application for timeouts, positions, and animations.

```javascript
iziToast.settings({
    timeout: 10000,
    resetOnHover: true,
    icon: 'material-icons',
    transitionIn: 'flipInX',
    transitionOut: 'flipOutX',
    position: 'topRight',
    onOpening: function(){
        console.log('Toast opening');
    },
    onClosing: function(){
        console.log("Toast closing");
    }
});

// All subsequent toasts will use these defaults
iziToast.success({
    title: 'Saved',
    message: 'Settings applied'
});
```

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

### Target Specific Containers for Toasts

Source: https://context7.com/marcelodolza/izitoast/llms.txt

Explains how to render toast notifications within a specific DOM element instead of the default body. Uses the 'target' property to specify the selector and 'targetFirst' to control insertion order.

```javascript
iziToast.show({
    title: 'Targeted',
    message: 'This toast appears in a specific container',
    target: '.my-container',
    targetFirst: true,
    position: 'bottomRight'
});
```

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

### Show izitoast Notification with Buttons

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

Displays a toast notification with customizable themes, icons, titles, messages, and positions. It also supports adding buttons with click handlers and defining callbacks for toast opening and closing events.

```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: [
        ['Ok', function (instance, toast) {
            alert("Hello world!");
        }, true], // true to focus
        ['Close', 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'
    }
});
```

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

### Include iziToast in HTML

Source: https://context7.com/marcelodolza/izitoast/llms.txt

Standard method for integrating the iziToast CSS and JavaScript files into a web page.

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

<!-- Include JS before scripts -->
<script src="iziToast.min.js" type="text/javascript"></script>
```

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

### Handle Toast Lifecycle Events with DOM Listeners

Source: https://context7.com/marcelodolza/izitoast/llms.txt

Utilize native JavaScript DOM event listeners to hook into specific toast lifecycle stages such as opening, opened, closing, and closed. These listeners receive a detail object containing metadata about the toast instance.

```javascript
document.addEventListener('iziToast-opening', function(data){
    if(data.detail.class == 'my-toast'){
        console.info('Toast is opening', data.detail);
    }
});

document.addEventListener('iziToast-opened', function(data){
    if(data.detail.id == 'notification-123'){
        console.info('Toast opened successfully');
    }
});

document.addEventListener('iziToast-closing', function(data){
    console.info('Toast closing', data.detail);
});

document.addEventListener('iziToast-closed', function(data){
    console.info('Toast closed');
    console.info('Closed by:', data.detail.closedBy);
});
```

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

### Capture iziToast Opened Event (JavaScript)

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

This snippet demonstrates how to listen for the 'iziToast-opened' custom event. It logs a message to the console when a toast with the class 'test' is opened. This is useful for tracking toast visibility or performing actions immediately after a toast appears.

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

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

### Configure Default izitoast Settings

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

Sets default values for izitoast notifications. This method allows customization of timeout, hover behavior, icons, transitions, and callback functions for opening and closing toasts.

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

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

### Trigger Notification Types

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

Display predefined toast notifications including info, success, warning, and error types. Each method accepts an object containing a title and message.

```javascript
iziToast.info({ title: 'Hello', message: 'Welcome!' });
iziToast.success({ title: 'OK', message: 'Successfully inserted record!' });
iziToast.warning({ title: 'Caution', message: 'You forgot important data' });
iziToast.error({ title: 'Error', message: 'Illegal operation' });
```

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

### Capture iziToast Closing Event (JavaScript)

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

This code captures the 'iziToast-closing' event, which fires just before a toast disappears. It checks if the closing toast has the class 'test' and logs a message. This can be used to perform cleanup tasks or trigger animations before the toast is fully removed.

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

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

### Programmatically Hide Toast Notifications

Source: https://context7.com/marcelodolza/izitoast/llms.txt

Closes a specific toast instance using a selector. Supports custom transition animations and completion callbacks.

```javascript
var toast = document.querySelector('.iziToast');

// Basic hide
iziToast.hide({}, toast);

// Hide with custom transition
iziToast.hide({
    transitionOut: 'fadeOutUp'
}, toast);

// Hide with callback
iziToast.hide({
    transitionOut: 'fadeOutRight',
    onClosing: function(instance, toast, closedBy){
        console.info('Toast closing by: ' + closedBy);
    }
}, toast, 'customReason');
```

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

### Capture iziToast Closed Event (JavaScript)

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

This snippet shows how to use the 'iziToast-closed' event listener to detect when a toast has finished closing. It logs the event and the reason for closing (e.g., 'closedBy') if the toast has the class 'test'. This is helpful for knowing when a notification is no longer visible and for debugging.

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

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

### Destroy All Toasts

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

Removes all currently active toast notifications from the DOM.

```javascript
iziToast.destroy();
```

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

### Destroy All Toast Notifications

Source: https://context7.com/marcelodolza/izitoast/llms.txt

Removes all active toast notifications from the DOM and resets the plugin state. Useful for cleanup before showing new content.

```javascript
iziToast.destroy();

// Common use case: cleanup before showing new toasts
iziToast.destroy();
iziToast.info({
    title: 'Fresh Start',
    message: 'All previous notifications cleared'
});
```

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

### Hide Specific izitoast Notification

Source: https://github.com/marcelodolza/izitoast/blob/master/docs/index.html

Closes a specific toast notification. This method can be used with a direct selector for the toast element or by passing new settings to override default closing transitions.

```javascript
var toast = document.querySelector('.iziToast'); // Selector of your toast

iziToast.hide({}, toast);

// Or make new settings                

iziToast.hide({
    transitionOut: 'fadeOutUp'
}, toast);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.