Custom Notification with SweetAlert2 and Tailwind CSS

displayNotification.js

const displayNotification = (
    title = 'You are offline',
    message = 'It seems like you have lost your internet connection. Please check your network settings and try again.',
    visibleTimeInMilliseconds = 2500
) => {
    let timerInterval;

    Swal.fire({
        toast: true,
        position: 'top-end',
        width: '550px',
        html: `
            <div class="bg-transparent flex flex-col text-start gap-4 text-[#014766]">
                <strong class="text-xl">${title}</strong>
                
                ${message && `<p>${message}</p>`}
            </div>
        `,
        color: '#014766',
        allowOutsideClick: false,
        allowEscapeKey: false,
        allowEnterKey: false,
        showCancelButton: false,
        showConfirmButton: false,
        timer: visibleTimeInMilliseconds,
        timerProgressBar: true,
        willClose: () => {
            clearInterval(timerInterval);
        },
    });
};

export default displayNotification;


// How to use
import displayNotification from './path/to/displayNotification';

// Display a custom notification
displayNotification(
    'Connection Restored',
    'Your internet connection is back online.',
    3000
);

Description:

This gist contains a utility function displayNotification for showing custom notifications using SweetAlert2. The function displays a toast notification at the top-right corner of the screen with a customizable title, message, and visible duration. This is particularly useful for alerting users about important information, such as loss of internet connection.

Usage:

1. Import the displayNotification function.
2. Call displayNotification() with optional parameters to show a custom notification.