GSP Toaste 🍞

A beautiful, configurable toast notification system for React applications.

Features

• 🎨 Beautiful Design: Modern, clean UI with smooth animations
• ⚙️ Highly Configurable: Customize position, animation, duration, and styling
• 🎭 Multiple Types: Success, error, warning, info, and default toast types
• 📱 Responsive: Works perfectly on all screen sizes
• 🎪 Animations: Choose from slide, fade, bounce, or zoom animations
• 🎯 Positioning: 6 different position options
• ⚡ TypeScript: Full TypeScript support with comprehensive type definitions
• 🪶 Lightweight: Minimal dependencies, maximum performance
• 🎛️ Flexible API: Simple yet powerful API for all use cases

Installation

npm install gsp-toaste

or

yarn add gsp-toaste

Quick Start

1. Wrap your app with ToastProvider

import React from 'react';
import { ToastProvider } from 'gsp-toaste';
import App from './App';

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

export default Root;

2. Use the useToast hook

import React from 'react';
import { useToast } from 'gsp-toaste';

function MyComponent() {
  const { toast } = useToast();

  const showToast = () => {
    toast({
      type: 'success',
      title: 'Success!',
      message: 'Your action was completed successfully.',
    });
  };

  return (
    <button onClick={showToast}>
      Show Toast
    </button>
  );
}

API Reference

ToastProvider Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | defaultPosition | ToastPosition | 'top-right' | Default position for toasts | | defaultAnimation | ToastAnimation | 'slide' | Default animation for toasts | | defaultDuration | number | 5000 | Default duration in milliseconds | | maxToasts | number | 5 | Maximum number of toasts to show | | className | string | undefined | Additional CSS class for toast containers |

Toast Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | type | 'success' \| 'error' \| 'warning' \| 'info' \| 'default' | 'default' | Toast type | | title | string | undefined | Toast title | | message | string | required | Toast message | | duration | number | 5000 | Duration in milliseconds (0 for persistent) | | position | ToastPosition | 'top-right' | Toast position | | animation | ToastAnimation | 'slide' | Toast animation | | dismissible | boolean | true | Whether toast can be dismissed | | onClick | () => void | undefined | Click handler | | onDismiss | () => void | undefined | Dismiss handler | | className | string | undefined | Additional CSS class | | style | React.CSSProperties | undefined | Inline styles | | icon | React.ReactNode | undefined | Custom icon |

Positions

• top-left
• top-center
• top-right
• bottom-left
• bottom-center
• bottom-right

Animations

• slide - Slide in from the side
• fade - Fade in/out with scale
• bounce - Bounce animation
• zoom - Zoom in/out

Examples

Basic Usage

import { useToast } from 'gsp-toaste';

function Example() {
  const { toast } = useToast();

  return (
    <div>
      <button onClick={() => toast({ message: 'Hello World!' })}>
        Basic Toast
      </button>
      
      <button onClick={() => toast({
        type: 'success',
        title: 'Success',
        message: 'Operation completed successfully!'
      })}>
        Success Toast
      </button>
      
      <button onClick={() => toast({
        type: 'error',
        message: 'Something went wrong!',
        duration: 0 // Persistent toast
      })}>
        Error Toast
      </button>
    </div>
  );
}

Custom Styling

toast({
  message: 'Custom styled toast',
  className: 'my-custom-toast',
  style: {
    backgroundColor: '#ff6b6b',
    color: 'white'
  }
});

Different Positions and Animations

toast({
  message: 'Bottom center with bounce!',
  position: 'bottom-center',
  animation: 'bounce'
});

With Custom Icon

import { Heart } from 'lucide-react';

toast({
  message: 'Custom icon toast',
  icon: <Heart className="w-5 h-5 text-red-500" />
});

Programmatic Dismissal

const { toast, dismiss, dismissAll } = useToast();

// Show a toast and get its ID
const toastId = toast({ message: 'This can be dismissed programmatically' });

// Dismiss specific toast
dismiss(toastId);

// Dismiss all toasts
dismissAll();

Styling

GSP Toaste comes with beautiful default styles powered by Tailwind CSS classes. The component is designed to work out of the box, but you can customize it extensively:

Custom CSS Classes

<ToastProvider className="my-toast-container">
  <App />
</ToastProvider>

Per-Toast Styling

toast({
  message: 'Styled toast',
  className: 'border-4 border-purple-500',
  style: { boxShadow: '0 0 20px rgba(128, 90, 213, 0.5)' }
});

TypeScript Support

GSP Toaste is written in TypeScript and provides comprehensive type definitions:

import { ToastOptions, ToastType, useToast } from 'gsp-toaste';

const { toast } = useToast();

const options: ToastOptions = {
  type: 'success',
  message: 'Fully typed!',
  duration: 3000
};

toast(options);

Contributing

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

License

MIT © [Your Name]