Yoyo Toast
yoyoToast.fire({
type: 'success',
title: 'Congratulation!',
message: 'Updated Successfully',
timeout: 3000,
position: 'top-right',
});
yoyoToast.fire({
type: 'danger',
title: 'Oh no!',
message: 'Something went wrong!',
subtext: 'The student name field is required.',
position: 'top-right',
});
yoyoToast.fire({
type: 'info',
title: 'Update Available',
message: 'Update to 10.5.3!',
timeout: 10000,
subtext: '~ Info Yoyo Toast ~',
position: 'top-right',
timeoutFunction: () => alert('Timeout Function called'),
hasConfirmation: true,
confirmLabel: 'Right!',
confirmFunction: () => alert('Confirm Function called'),
hasCancellation: true,
cancelLabel: 'Not Now',
cancelFunction: () => alert('Cancel Function called'),
});
yoyoToast.fire({
type: 'warning',
message: 'Warning!',
timeout: 0,
subtext: 'Windows will shut down in 10 seconds.',
position: 'top-left',
});
yoyoToast.fire({
type: 'question',
message: 'Do you need any further assistance?',
timeout: 0,
position: 'bottom-right',
});
npm install yoyo-toast
yarn add yoyo-toast
import { yoyoToast } from './node_modules/yoyo-toast/dist/yoyoToast.min.mjs';
<script src="./node_modules/yoyo-toast/dist/yoyoToast.umd.min.js"></script>
<!-- jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/gh/smallvi/yoyoToast@latest/dist/yoyoToast.umd.min.js"></script>
<!-- unpkg CDN -->
<script src="https://unpkg.com/yoyo-toast@latest/dist/yoyoToast.umd.min.js"></script>
import { yoyoToast } from 'path/to/yoyoToast.min.mjs';
<script src="path/to/yoyoToast.umd.min.js"></script>
yoyoToast.fire({
type: 'danger',
message: 'Error Found!',
});
yoyoToast.fire({
type: 'info',
title: 'Update Available',
message: 'Update to 10.5.3!',
timeout: 10000,
subtext: '~ Info Yoyo Toast ~',
position: 'top-right',
timeoutFunction: () => alert('Timeout Function called'),
hasConfirmation: true,
confirmLabel: 'Right!',
confirmFunction: () => alert('Confirm Function called'),
hasCancellation: true,
cancelLabel: 'Not Now',
cancelFunction: () => alert('Cancel Function called'),
});
| Description | |
|---|---|
typeOptional |
Icon type.('info', 'question', 'success', 'warning', 'danger') |
messageMandatory |
Main text displayed in the Toast |
titleOptional |
Title Text. |
subtextOptional |
Additional text shown below the main text. |
positionOptional |
Display position('top-left', 'top-right', 'bottom-left', 'bottom-right') |
timeOutOptional |
Auto-close the Toast after a specified time.(e.g., `1000` for 1 second) |
timeoutFunctionOptional |
function to call when timeout occurs. |
hasConfirmationOptional |
Boolean indicating if the Toast includes a confirm button.(true, false) |
confirmLabelOptional |
Text label for the confirm button. |
confirmFunctionOptional |
Function to call when the confirm button is pressed. |
hasCancellationOptional |
Boolean indicating if the Toast includes a cancel button.(true, false) |
cancelLabelOptional |
Text label for the cancel button. |
cancelFunctionOptional |
Function to call when the cancel button is pressed. |
closeFunctionOptional |
Function to call when the close button is pressed. |