Using React Toasts for User Feedback

This document outlines how to integrate the provided React code for displaying informative and visually appealing toast notifications within your React application.

Installation

1. Install the react-notiffy library using npm or yarn:

   npm install react-toastify

Creating the Toast Context

import { ToastProvider } from "react-notiffy";

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

Displaying Toast Notifications

1. Import the useToast hook from the toast code

import { useToast } from "react-notiffy";

2. Within your components, use the useToast hook to access the addToast function for displaying notifications:

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

  const handleClick = () => {
    addToast({
      message: "Your action was successful!",
      type: "success",
      duration: 5000,
    });
  };

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