Custom Toast Library

A lightweight, customizable toast notification library for React applications. custom-toast-lib provides a simple and flexible way to display toast notifications with various styles, positions, and customization options.

Features

• 🎨 Multiple toast types (info, success, warning, error, default)
• 📍 6 different positions (top-right, top-center, top-left, bottom-right, bottom-center, bottom-left)
• ⚡ Customizable appearance (colors, icons, sizes)
• 🎯 Auto-dismiss functionality
• 🔄 Smooth animations
• 📱 Responsive design
• 🛠️ Easy to use and integrate
• 🌍 Global default position configuration

Installation

npm install @mcruces/custom-toast-lib
# or
yarn add  @mcruces/custom-toast-lib

Quick Start

1. Wrap your application with the ToastProvider:

import { ToastProvider } from ' @mcruces/custom-toast-lib';

function App() {
  return (
    <ToastProvider defaultPosition="top-right">
      <YourApp />
    </ToastProvider>
  );
}

2. Use the useToast hook in your components:

import { toast } from ' @mcruces/custom-toast-lib';

function YourComponent() {

  const showNotification = () => {
    toast.success('Operation completed!', {
      comments: 'Your changes have been saved',
      position: 'top-right' // This will override the default position
    });
  };

  return <button onClick={showNotification}>Show Toast</button>;
}

Global Default Position Configuration

You can set a global default position for all toasts in your application:

Using ToastProvider (Recommended)

import { ToastProvider } from ' @mcruces/custom-toast-lib';

function App() {
  return (
    <ToastProvider defaultPosition="top-center">
      <YourApp />
    </ToastProvider>
  );
}

Programmatically Changing Default Position

import { setDefaultPosition, getDefaultPosition } from ' @mcruces/custom-toast-lib';

// Change the global default position
setDefaultPosition('bottom-left');

// Get the current global default position
const currentDefault = getDefaultPosition();
console.log(currentDefault); // 'bottom-left'

Position Precedence

The position is determined in the following order:

1. Individual toast position (highest priority) - specified in the toast options
2. Provider default position - set via ToastProvider's defaultPosition prop
3. Global default position - set via setDefaultPosition() function
4. Library default - falls back to 'bottom-right'

API Reference

useToast Hook

The useToast hook provides methods to show different types of toasts:

const { toast } = useToast();

// Basic usage
toast.info('Information message');
toast.success('Success message');
toast.warning('Warning message');
toast.error('Error message');
toast.default('Default message');

// Dismiss a specific toast
toast.dismiss(toastId);

Toast Options

Each toast method accepts a message and an options object:

toast.success('Message', {
  // Position (string) - overrides default position
  position: 'top-right', // 'top-center', 'top-left, 'bottom-right' ...
  
  // Additional message content
  comments: 'Additional details',
  
  // Custom styling
  backgroundColor: '#4CAF50',
  color: '#FFFFFF',
  
  // Icon customization
  icon: <YourIcon />,
  iconColor: '#FFFFFF',
  
  // Close button customization
  closeButtonColor: '#FFFFFF',
  closeButtonSize: '18px',
  
  // Auto-dismiss timing (in milliseconds)
  autoClose: 5000
});

Global Configuration Functions

import { setDefaultPosition, getDefaultPosition } from ' @mcruces/custom-toast-lib';

// Set the global default position for all toasts
setDefaultPosition('top-center');

// Get the current global default position
const defaultPos = getDefaultPosition();

Available Positions

import { ToastPosition } from ' @mcruces/custom-toast-lib';

// String positions
'top-right'
'top-center'
'top-left'
'bottom-right'
'bottom-center'
'bottom-left'

Default Styles

The library comes with predefined styles for different toast types:

• Info: Light blue background with info icon
• Success: Light green background with check icon
• Warning: Light orange background with warning icon
• Error: Light red background with error icon
• Default: Dark background with bell icon
• Custom: Dark background with bell icon (like default)

Customization

You can customize the appearance of toasts by passing style options:

toast.success('Custom styled toast', {
  backgroundColor: '#4CAF50',
  color: '#FFFFFF',
  iconColor: '#FFFFFF',
  closeButtonColor: '#FFFFFF',
  closeButtonSize: '18px'
});

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

Gotasoft © @mcruces