🔔 SNDP - Professional Toast Notifications

Beautiful, customizable toast notifications for React and Next.js applications.

✨ Features

• 🎨 5 Toast Types - Success, Error, Warning, Info, Loading
• 📍 6 Position Options - All corners and centers
• 🎭 3 Animation Styles - Fade, Slide, Bounce
• 🌓 Light & Dark Theme - Built-in theme support
• ⏱️ Auto Close - Customizable duration
• 🎯 Pause on Hover - Stop timer when hovering
• 📊 Progress Bar - Visual countdown
• 🔄 Promise Support - Loading → Success/Error flow
• 🎬 Custom Actions - Add buttons to toasts
• ♿ Accessible - ARIA roles and keyboard navigation
• 📦 Lightweight - Minimal bundle size
• 🚀 SSR Ready - Works with Next.js

📦 Installation

npm install sndp-toast

or

yarn add sndp-toast

🚀 Quick Start

1. Wrap your app with ToastProvider

import { ToastProvider } from 'sndp-toast';

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

2. Use the useToast hook

import { useToast } from 'sndp-toast';

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

  return (
    <button onClick={() => toast.success('Success!')}>
      Show Toast
    </button>
  );
}

📖 Usage Examples

Basic Usage

const { toast } = useToast();

// Simple message
toast("Hello World!");

// Different types
toast.success("Operation successful!");
toast.error("Something went wrong!");
toast.warning("Please be careful!");
toast.info("Here's some info");
toast.loading("Processing...");

With Options

toast.success("Saved successfully!", {
  duration: 5000,
  title: "Success",
  showIcon: true,
  closeable: true,
  blur: true
});

Promise-based Toasts

toast.promise(
  fetchData(),
  {
    loading: "Loading data...",
    success: "Data loaded successfully!",
    error: "Failed to load data"
  }
);

With Action Buttons

toast.success("Item deleted", {
  actions: [
    {
      label: "Undo",
      onClick: () => restoreItem(),
      primary: true,
      closeOnClick: true
    },
    {
      label: "Dismiss",
      onClick: () => {},
      closeOnClick: true
    }
  ]
});

Custom Title and Message

toast.success("Operation completed", {
  title: "Success!",
  message: "Your changes have been saved successfully"
});

Update Toast Dynamically

const id = toast.loading("Uploading...");

// Later update it
toast.update(id, {
  type: "success",
  message: "Upload complete!",
  duration: 3000
});

Dismiss Toast

const id = toast.info("Processing...");

// Dismiss it programmatically
toast.dismiss(id);

⚙️ ToastProvider Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | position | string | 'top-right' | Position of toasts (top-left, top-right, top-center, bottom-left, bottom-right, bottom-center) | | maxToasts | number | 5 | Maximum number of toasts to show | | pauseOnHover | boolean | true | Pause auto-close on hover | | animation | string | 'slide' | Animation type (fade, slide, bounce) | | theme | string | 'light' | Theme (light, dark) | | defaultDuration | number | 3000 | Default duration in milliseconds |

🎨 Toast Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | type | string | 'info' | Toast type (success, error, warning, info, loading) | | message | string/React | - | Toast message content | | title | string | - | Optional title | | duration | number | 3000 | Duration in milliseconds (null for no auto-close) | | closeable | boolean | true | Show close button | | showIcon | boolean | true | Show type icon | | showProgress | boolean | true | Show progress bar | | blur | boolean | false | Enable blur effect | | className | string | - | Custom CSS class | | style | object | - | Custom inline styles | | actions | array | - | Action buttons |

🎯 Action Button Props

{
  label: "Button Text",
  onClick: () => {},
  primary: false,
  closeOnClick: true
}

🌈 Next.js Usage

For Next.js, wrap your app in _app.js:

// pages/_app.js
import { ToastProvider } from 'sndp';

function MyApp({ Component, pageProps }) {
  return (
    <ToastProvider position="top-right" theme="light">
      <Component {...pageProps} />
    </ToastProvider>
  );
}

export default MyApp;

🎭 Custom Styling

toast.success("Custom styled toast", {
  className: "my-custom-class",
  style: {
    backgroundColor: "#000",
    color: "#fff"
  }
});

📱 Responsive

SNDP is fully responsive and works great on mobile devices. Toasts automatically adjust their width on smaller screens.

♿ Accessibility

• ARIA roles for screen readers
• Keyboard navigation support
• Appropriate alert levels for different toast types
• Reduced motion support

🤝 Contributing

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

📄 License

MIT © sandipan kr bag

🙏 Support

If you like this project, please give it a ⭐ on GitHub!