⚡apna-toast

A lightweight and customizable toast notification system for React using hooks and react-icons. Show success, error, warning, or info messages with ease — includes custom duration and position support.

📦 Installation

Install the package with:

npm install apna-toast react-icons

✨ Features

• 🧠 Simple hook-based API
• 🔔 Four toast types: success, error, warning, info
• ⏱️ Supports custom duration
• 📍 Choose position: top-right, top-left, bottom-right, bottom-left
• ❌ Close button to manually dismiss
• 💅 Fully customizable with CSS

🚀 Usage

1. Import the Hook

import useNotification from "react-yuvraj-toast";

2. Use in Your Component

import React from "react";
import useNotification from "react-yuvraj-toast";

const App = () => {
  const { triggerNotification, NotificationComponent } =
    useNotification("top-right");

  const handleClick = () => {
    triggerNotification({
      type: "success",
      message: "This is a success toast!",
      duration: 4000, // optional
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Show Toast</button>
      {NotificationComponent}
    </div>
  );
};

export default App;

⚙️ API

triggerNotification({ type, message, duration })

| Prop | Type | Required | Description | | ---------- | ------ | -------- | --------------------------------------------- | | type | string | ✅ | One of: "success", "info", "warning", "error" | | message | string | ✅ | Text content of the toast | | duration | number | ❌ | Duration (in milliseconds). Default is 3000 |

📍 Position Options

Set the position of the toast container when using the hook:

const { triggerNotification, NotificationComponent } =
  useNotification("bottom-left");

Accepted values:

• top-right (default)
• top-left
• bottom-right
• bottom-left

🎨 Styling

You can override the styles by targeting the following classes in your CSS:

• .notification
• .success, .error, .info, .warning
• .toast-container, .top-right, .top-left, etc.

🛠 Dependencies

• react-icons — for toast icons

👨‍💻 Author

Made with ❤️ by Yuvraj Singh

📃 License

MIT