Framework-Agnostic Toast Notifications with TypeScript – NotifyX

NotifyX is a framework-agnostic JavaScript toast notification library that displays beautiful success messages, error alerts, and system warnings on your web apps.

The library weighs less than 3KB gzipped and works perfectly with React, Next.js, Vue, Angular, Laravel, or vanilla JavaScript.

Features

• Built-in Dark Mode: Automatically detects system preferences.
• TypeScript Support: Built with TypeScript from the ground up.
• WCAG Compliant: Includes proper ARIA attributes and keyboard navigation.
• Four Toast Types: Success, error, warning, and info variants.
• Flexible Positioning: Four corner positions (top-right, top-left, bottom-right, bottom-left).
• Customizable Duration: Set display time from 1 second to persistent.

How To Use It:

1. Install NotifyX with the package manager you prefer and import it into your project as follows:

# Yarn
$ yarn add notifyx

# NPM
$ npm install notifyx

# PNPM
$ pnpm install notifyx

# BUN
$ bun add notifyx

// Import the NotifyX class
import NotifyX from 'notifyx';

// Import default styles
import 'notifyx/style.css';

2. You can also load the NotifyX’s files in your document if you use it in a Vanilla JavaScript project.

<!-- Local -->
<link rel="stylesheet" href="/dist/notifyx.min.css" />
<script src="/dist/notifyx.min.js"></script>

<!-- OR from a CDN -->
<link rel="stylesheet" href="https://unpkg.com/notifyx@latest/dist/notifyx.min.css" />
<script src="https://unpkg.com/notifyx@latest/dist/notifyx.min.js"></script>

3. NotifyX provides four methods for different message types:

// Success
NotifyX.success('Success Message');

// Error
NotifyX.error('Error Message');

// Warning
NotifyX.warning('Warning Message');

// Info
NotifyX.info('Info Message');

4. Place notifications in any screen corner:

// Top positions (default is top-right)
NotifyX.info('Top Right Position', { position: 'top-right' });
NotifyX.info('Top Left Position', { position: 'top-left' });

// Bottom positions
NotifyX.info('Bottom Right Position', { position: 'bottom-right' });
NotifyX.info('Bottom Left Position', { position: 'bottom-left' });

5. Control how long notifications remain visible:

// Auto-dismiss after 2 seconds
NotifyX.success('Success Message', { duration: 1000 });

// Auto-dismiss after 3 seconds
NotifyX.info('Info Message');

// Persistent notification
NotifyX.error('Error Message', { duration: 0 });

6. You can also use the show() method for complete control:

NotifyX.show({
  message: 'User profile updated successfully!',
  type: 'default',  // Notification type
  duration: 3000,
  showProgress: true,
  showIcon: true,
  pauseOnHover: true,
  dismissible: true,
  maxToasts: 5,
  position: 'top-right',
  onClose: () => {
    // This callback fires when notification closes
    console.log('Notification was closed');
  }
});

Alternatives:

• 10 Best Toast Notification JavaScript Libraries (2026 Update)

The post Framework-Agnostic Toast Notifications with TypeScript – NotifyX appeared first on CSS Script.