In a web application, toast notifications are an easy and efficient way to give consumers feedback. They can be utilized to notify users of successful or unsuccessful tasks, mistakes, or just to convey a general message. We'll examine utilizing the package to implement toast notifications in a React application. In this article I will show you how to use to add some stylish design elements. react-toastify Tailwind Prerequisites Before getting started with this tutorial, you should have the following: Knowledge of React and Tailwind. or installed as a package manager yarn npm Install the Library You must first install the library before you can proceed. Run the following command in your terminal to accomplish this: react-toastify npm install react-toastify or yarn add react-toastify Import the Library Before you can import the library, you must first create a folder, then a folder, and finally a file, which I will name . Make a file called in the folder. src component FormPage.js App.js src Once the library is installed, you'll need to import it into your . You can do this by adding the following line of code at the top of your component file: FormPage.js import { toast } from 'react-toastify' Next, create the function in your . This function will be responsible for displaying the toast notification. Inside the function, use the toast function to display the notification. handleSumit FormPage.js const handleSubmit = (event) => {
  event.preventDefault();
  toast.success("You have registered");
}; The function is typically used to prevent the default behavior of a form submission event.
When a form is submitted, the default behavior is to send a request to the server, which can result in the current page being reloaded.
When the form is submitted, the function is called and the object is passed as an argument.
The object is given a call to the method, which stops the form from being sent to the server.
The is a function that is used to display a success message, or "toast," to the user in a web application. preventDefault handleSubmit event event preventDefault toast.success Create your form Now, you need to bind the function to an event in your component. This could be a button click, a form submission, or any other type of event. For example, to display the toast notification when a form is submitted, you could do the following on the : handleSumit FormPage.js const FormPage = () => {
  return (
    <div className="flex justify-center items-center h-screen">
      <div className="block p-6 rounded-lg shadow-lg bg-white max-w-sm">
        <form onSubmit={handleSubmit}>
          <div className="form-group mb-6">
            <input
              type="text"
              className="form-control block w-full px-3 py-1.5 text-gray-700
              bg-white bg-clip-padding border border-solid border-gray-300
              rounded transition ease-in-out m-0 focus:text-gray-700 
              focus:bg-white focus:border-blue-600 focus:outline-none"
              id="exampleInput90"
              placeholder="Name"
            />
          </div>
          <div className="form-group mb-6">
            <input
              type="email"
              className="form-control block w-full px-3 py-1.5 
              text-gray-700 bg-white bg-clip-padding border border-gray-300 
              rounded transition ease-in-out
              m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 
              focus:outline-none"
              id="exampleInput91"
              placeholder="Email address"
            />
          </div>
          <div className="form-group form-check text-center mb-6">
            <input
              type="checkbox"
              className="form-check-input appearance-none h-4 w-4 border 
              border-gray-300 rounded-sm bg-white checked:bg-blue-600          
              checked:border-blue-600 focus:outline-none transition duration-200
              mt-1 align-top bg-no-repeat bg-center bg-contain mr-2 cursor-pointer"
              id="exampleCheck96"
              checked
            />
            <label
              className="form-check-label inline-block text-gray-800"
              for="exampleCheck96"
            >
              I have read and agreed to the terms.
            </label>
          </div>
          <button
            type="submit"
            className="w-full px-6 py-2.5 bg-blue-600 text-white 
            font-medium text-xs leading-tight uppercase rounded 
            shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700
            focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 
            active:shadow-lg transition duration-150 ease-in-out"
          >
            Subscribe
          </button>
        </form>
      </div>
    </div>
  );
}; Here is how your form would look on the browser. Customizing the Toast Notification You can customize the appearance and behavior of your toast notifications by passing options as arguments to the . The can be used on . Import the from the library. ToastContainer ToastContainer App.js ToastContainer react-toastify import { ToastContainer } from "react-toastify" Some of the options you can use include: : Specifies the position on the screen where the notification should be displayed (e.g. top-right, bottom-left). **position** : Specifies the duration (in milliseconds) for which the notification should be displayed before it is automatically closed, in ( 1000 = 1sec). **autoClose** autoClose : Hides the progress bar that appears at the bottom of the notification. **hideProgressBar** : This property determines the order in which toasts are displayed. **newestOnTop** boolean : Closes the notification when the user clicks on it. **closeOnClick** : Which stands for "right-to-left, is a property that determines the direction in which toasts are displayed within the toast container. **rtl** boolean : Makes the notification draggable by the user. **draggable** : Pauses the auto-close timer when the user hovers over the notification. **pauseOnHover** Here's is how example of how  you can use some of these options in the : ToastContainer <ToastContainer 
        position="top-center"
        autoClose={5000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      /> This will display a success notification that will be displayed for 5 seconds, dragged around by the user, closed when clicked, and has a visible progress bar. Conclusion Finally, React Toast Notification is a useful tool for displaying temporary messages to the user in a visually appealing and customizable manner. Following the steps outlined in this article, you should now have a solid understanding of how to use React Toast Notification in your own projects. Whether you want to notify the user of a success or error message, or simply alert them to new information, React Toast Notification can help you do so in a professional and user-friendly manner. To access my repository, simply follow this link . https://github.com/Uhiene/Form.git Resources . Tailwind Forms component . React Toastify GitHub page . React Toastify documentation

Framer Motion: The Ultimate Keyframe Tutorial for Mind-Blowing Animations

Hire me!

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Create Toast Notifications in React Applications

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

2024 Complete Full-Stack Developers Roadmap

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

2024 Complete Full-Stack Developers Roadmap

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps