React Zap Toast

React Zap Toast is a simple, customizable, and accessible toast notification component for React applications.

Installation

Install React Zap Toast via npm:

npm install react-zaptoast

Usage

To use React Zap Toast in your React application, follow these steps:

1. Import the useNotification hook:

import useNotification from "react-zaptoast";

2. Initialize the useNotification hook:

const { NotificationContainer, toast } = useNotification();

3. Add the NotificationContainer to your JSX:

return (
  <div className="App">
    {NotificationContainer}
    {/* Your other JSX content */}
  </div>
);

4. Trigger notifications using the toast function:

toast("This is a default message");
toast.success("This is a success message!");
toast.error("This is an error message!");
toast.info("This is an info message!");
toast.warning("This is a warning message!");

API

useNotification()

This hook returns an object with the following properties:

• NotificationContainer: React element representing the notification container.
• toast: Function to trigger notifications with various methods.
• dismiss(id: string): Function to dismiss a specific notification.
• dismissAll(): Function to dismiss all notifications.

toast(message: string, options?: ToastOptions)

The main function to trigger notifications. It returns a unique ID for the created notification.

ToastOptions

• type: Type of the notification ("success" | "error" | "info" | "warning" | "default").
• duration: Duration in milliseconds for which the notification should be displayed (default: 3000).
• position: Position of the notification ("top-left" | "top-right" | "bottom-left" | "bottom-right").
• animation: Animation type for the notification ("fade" | "pop" | "slide").

Shorthand Methods

• toast.success(message: string, options?: Partial<ToastOptions>)
• toast.error(message: string, options?: Partial<ToastOptions>)
• toast.info(message: string, options?: Partial<ToastOptions>)
• toast.warning(message: string, options?: Partial<ToastOptions>)

These methods are shortcuts for creating specific types of notifications.

Example

Here's a basic example of how to use React Zap Toast:

import React from "react";
import useNotification from "react-zaptoast";

function App() {
  const { NotificationContainer, toast } = useNotification();

  const showNotifications = () => {
    toast("Default notification");
    toast.success("Success!", { position: "top-right", animation: "pop" });
    toast.error("Error occurred", { duration: 5000 });
    toast.info("Just so you know...");
    toast.warning("Be careful!");
  };

  return (
    <div className="App">
      {NotificationContainer}
      <h1>React Zap Toast Demo</h1>
      <button onClick={showNotifications}>Show Notifications</button>
    </div>
  );
}

export default App;

Accessibility

React Zap Toast is designed with accessibility in mind:

• Notifications use appropriate ARIA roles and live regions.
• Error and warning notifications are announced immediately to screen readers.
• Notifications can be dismissed using the keyboard.

License

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