npm react toastify in reactjs

A Pure Javascript Library

React Toastify is a popular library for creating toast notifications in React applications. It provides a simple and customizable way to display temporary messages or alerts to the user.

To use React Toastify, you need to install the library first. You can do this by running the following command in your React project directory:
 

npm i react-toastify

Once the installation is complete, you can import the necessary components and start using React Toastify in your application. Here's an example of how you can display a basic toast notification:

import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

function Thetoastify() {
  const login = () => {
    toast("Login Successful");
  };

  const signup = () => {
    toast.success("Registration Successfull", {
      position: "top-left",
    });
  };
  return (
    <div>
      <div className=" flex justify-center  mt-56 space-x-5 text-white">
        <button
          className=" bg-blue-600 pt-2 pb-2 pr-5 pl-5  rounded-md cursor-pointer "
          onClick={login}
        >
          Login
        </button>

        <button
          className=" bg-blue-600 pt-2 pb-2 pr-5 pl-5  rounded-md cursor-pointer "
          onClick={signup}
        >
          Signup
        </button>
      </div>

      <ToastContainer position="top-right" />
    </div>
  );
}

export default Thetoastify;

 In this example, we import the ToastContainer and toast components from 'react-toastify'.If you want you can also import the CSS file for styling the toast notifications.

Inside the Thetostify function, we define a notify function that calls the toast function with the desired message or login successfull message. When the button is clicked, it triggers the notify function, which displays the toast notification.

Now we are calling <Thetoastify /> component in App.js file.

import { Route, Routes } from "react-router-dom";
import Thetoastify from "./components/Thetoastify";
import Navbar from "./components/Navbar";





export default function App() {
  return (
    <>
 <Navbar />
    <Routes>
     
      <Route path='/' element={<Thetoastify />} />
  
    </Routes>

    </>
  )
}

The ToastContainer component is used to wrap all the toast notifications. It should be placed once in your application, typically at the root level, to ensure the toasts are rendered properly.

You can customize the appearance and behavior of the toast notifications by passing different options to the toast function or by using the ToastContainer component's props. The React Toastify documentation provides more information on the available options and customization possibilities.

Remember to add the ToastContainer component to your application's layout or root component so that it can render the toast notifications correctly.

That's a basic example of using React Toastify in your React application. You can explore more features and options offered by the library to enhance your toast notifications further.

Result

Disclaimer

All tutorials are for informational and educational purposes only and have been made using our own routers, servers, websites and other vulnerable free resources. we do not contain any illegal activity. We believe that ethical hacking, information security and cyber security should be familiar subjects to anyone using digital information and computers. Hacking Truth is against misuse of the information and we strongly suggest against it. Please regard the word hacking as ethical hacking or penetration testing every time this word is used. We do not promote, encourage, support or excite any illegal activity or hacking.