@sonardigital/toasts

A React toast notification library built on top of Sonner with Material-UI styled alerts. Provides a simple API for displaying success, error, info, and warning notifications with optional titles and custom actions.

Features

• 🎨 Material-UI Integration: Styled with MUI Alert components
• 🎯 Simple API: Pre-configured toast methods for common use cases
• ⚡ Built on Sonner: Leverages the powerful Sonner toast library
• 🛡️ Type Safety: Full TypeScript support
• 🎭 Custom Actions: Support for action buttons in toasts
• 🔧 Flexible: Custom toast content support

Installation

npm install @sonardigital/toasts

Quick Start

1. Add ToastProvider to your app

import { ToastProvider } from '@sonardigital/toasts';

function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}

2. Use toast notifications

import { toast } from '@sonardigital/toasts';

// Success notification
toast.success('Operation completed successfully');

// Error notification
toast.error('Something went wrong');

// Info notification
toast.info('Here is some information');

// Warning notification
toast.warning('Please be careful');

API Reference

toast

The main toast object with methods for different notification types:

toast.success(message?: string, title?: string, actions?: React.ReactNode): void

toast.error(message?: string, title?: string, actions?: React.ReactNode): void

toast.info(message?: string, title?: string, actions?: React.ReactNode): void

toast.warning(message?: string, title?: string, actions?: React.ReactNode): void

toast.custom(content: React.ReactElement): void

ToastProvider

Wrapper component that provides toast functionality to your app:

<ToastProvider>
  {children}
</ToastProvider>

Usage Examples

Basic Notifications

import { toast } from '@sonardigital/toasts';

// Simple messages
toast.success('User created successfully');
toast.error('Failed to save data');
toast.info('New update available');
toast.warning('Session will expire soon');

With Titles

toast.success('Profile updated', 'Success');
toast.error('Network error', 'Connection Failed');

With Custom Actions

import { Button } from '@mui/material';

toast.error(
  'Failed to delete item',
  'Error',
  <Button color="inherit" size="small" onClick={() => retry()}>
    Retry
  </Button>
);

Custom Toast Content

import { toast } from '@sonardigital/toasts';

toast.custom(
  <div>
    <h3>Custom Content</h3>
    <p>You can render any React component here</p>
  </div>
);

React Integration Example

import { toast } from '@sonardigital/toasts';

function UserForm() {
  const handleSubmit = async (data) => {
    try {
      await saveUser(data);
      toast.success('User saved successfully', 'Success');
    } catch (error) {
      toast.error(error.message, 'Save Failed');
    }
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

Configuration

The ToastProvider uses Sonner's Toaster component with the following default configuration:

• Position: bottom-left
• Rich colors: enabled

Dependencies

• sonner: ^2.0.7
• @mui/material: ^7.3.2
• @mui/icons-material: ^7.3.2
• @emotion/react: ^11.14.0
• @emotion/styled: ^11.14.1
• react: ^19.1.0
• dayjs: ^1.11.18

License

ISC