Here's an updated and more detailed version of your README file for the React Toast Notifications library:

React Toast Notifications

A modern, highly customizable toast notification library for React applications with TypeScript support. Designed for simplicity, flexibility, and ease of use.

Features

• 🎨 Fully Customizable: Easily adapt styles and themes to match your application's design.
• 🌗 Light and Dark Mode: Built-in support for light and dark themes.
• 📍 Dynamic Positioning: Place notifications dynamically (top-right, top-left, bottom-right, bottom-left, top-center, bottom-center).
• 🎯 Notification Types: Predefined styles for success, error, warning, and info notifications.
• ⚡ Auto-Dismiss: Automatically hides notifications after a configurable duration.
• ⏱️ Progress Bar: Displays a progress bar for auto-dismissed notifications.
• 🔧 Flexible API: Use hooks, context, or utility functions to trigger notifications.
• 📱 Responsive Design: Optimized for all screen sizes.
• 💪 TypeScript Support: Strongly typed for a seamless developer experience.
• 🎁 Minimal Dependencies: Only depends on React and lucide-react for icons.

Installation

Using npm

npm install @yourusername/toast-notifications

Using yarn

yarn add @yourusername/toast-notifications

Quick Start

1. Wrap Your App with ToastProvider

To enable toast notifications throughout your application, wrap your root component with ToastProvider. You can now specify the position prop to dynamically place notifications.

import { ToastProvider } from "@iamrraj/toast-notifications";

function App() {
  return (
    <ToastProvider position="bottom-center">
      {" "}
      {/* Set toast position dynamically */}
      <YourApp />
    </ToastProvider>
  );
}

Supported Positions:

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

2. Trigger Notifications with useToast

Use the useToast hook in your components to show notifications.

import { useToast } from "@iamrraj/toast-notifications";

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

  const showNotification = () => {
    toast.success("Success!", "Operation completed successfully");
    toast.error("Error!", "Something went wrong");
    toast.warning("Warning!", "Please check your input");
    toast.info("Info", "New updates available");
  };

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

3. Use Utility Functions for Global Access

If you need to trigger notifications outside of React components, use the ToastUtils.

import { ToastUtils } from "@iamrraj/toast-notifications";

// Trigger a success notification globally
ToastUtils.success("Success!", "Operation completed successfully");

API Reference

ToastProvider

The ToastProvider is a context provider that wraps your application and provides access to the toast notification system.

| Prop | Type | Default | Description | | ---------- | --------------- | ------------- | -------------------------------- | ---------------- | | children | ReactNode | - | The child components of your app | | theme | 'light' | 'dark' | 'light' | Theme for toasts | | position | ToastPosition | 'top-right' | Position of toasts on the screen |

Toast Methods

The following methods are available through the useToast hook or ToastUtils:

• toast.success(title, message, duration?)
• toast.error(title, message, duration?)
• toast.warning(title, message, duration?)
• toast.info(title, message, duration?)

| Parameter | Type | Default | Description | | ---------- | -------- | ------- | --------------------------------------------------- | | title | string | - | Title of the notification | | message | string | - | Message content of the notification | | duration | number | 3000 | Time (in ms) before the notification auto-dismisses |

Customization

Styling with Tailwind CSS

The library uses Tailwind CSS by default. Customize the styles by modifying your Tailwind configuration.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        toast: {
          success: "#4CAF50",
          error: "#F44336",
          warning: "#FF9800",
          info: "#2196F3",
        },
      },
    },
  },
};

You can also override the styles of individual toasts by passing a className prop.

<Toast
  title="Custom Toast"
  message="With custom styling"
  className="your-custom-classes"
/>

Theming

Switch between light and dark themes using the theme prop in ToastProvider.

<ToastProvider theme="dark">
  <YourApp />
</ToastProvider>

Examples

Basic Example

import React from "react";
import { ToastProvider, useToast } from "@iamrraj/toast-notifications";

const App = () => {
  const toast = useToast();

  const notify = () => {
    toast.success("Success!", "Your operation was successful!");
  };

  return (
    <ToastProvider>
      <button onClick={notify}>Show Success Notification</button>
    </ToastProvider>
  );
};

export default App;

Example with All Features

import React from "react";
import { ToastProvider, useToast } from "@iamrraj/toast-notifications";

const App = () => {
  const toast = useToast();

  const showAllToasts = () => {
    toast.success("Success!", "Your operation was successful!");
    toast.error("Error!", "Something went wrong.");
    toast.warning("Warning!", "Check your inputs.");
    toast.info("Info", "New updates available.");
  };

  return (
    <ToastProvider theme="dark" position="bottom-center">
      <button onClick={showAllToasts}>Show All Toasts</button>
    </ToastProvider>
  );
};

export default App;

Contributing

We welcome contributions! Feel free to submit issues or pull requests on GitHub.

License

This project is licensed under the MIT License. See the LICENSE file for details.

MIT © [Rahul Raj]

Change Log (Updated)

v1.0.0

• Initial release with support for:
  • Success, error, warning, and info toasts
  • Light and dark themes
  • Auto-dismiss and progress bar
  • Custom styling and theming support

v1.1.0

• Added Dynamic Positioning: Support for toast placement at different positions (top-right, bottom-center, etc.).
• Minor bug fixes and improvements.