Toast notifications or alerts are modal-like components that display information, or any message to users, usually via buttons. Toast notifications are commonly used to display :
- A notification or a custom message.
- A success message upon submission of a form.
- An error message if API request fails.
React Hot Toast Module: The React Hot Toast module is a lightweight and customizable library that adds beautiful notifications to our react application.
Features:
- It is easy to use, customizable and lightweight. It weighs less than 5kb.
- We can make various toasts, such as notification, success, and error toasts.
- We can create a themed toast by adding unique styles to our toast.
- Notifications can be placed at the top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right positions.
- Multiline and dark mode toasts are also possible.
- It supports emojis.
- We can use Promise API.
Approach: We will create a React application and create toasts using the react-hot-toast package. We will play around with various toasts, position them, and add unique styles.
Step 1: Make a project directory, head over to the terminal, and create a react app named “notification” using the following command:
npx create-react-app notification
After the notification app is created, switch to the new folder “notification” using the following command:
cd notification
Step 2: After creating the React application, Install the react-hot-toast package using the following command:
npm install react-hot-toast
Installing react-hot-toast
Step 3: Modify your project structure. We will modify the folder and keep the files we need for this project. Add a style.css file to the folder. Make sure your file structure looks like this :
Final project structure:
Final Project Structure
Step 4: Add code to your index.html file. Include the following code in your index.html file, located in the public folder of your project directory.
index.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <title>Toasting Notifications</title> </head> <body> <div id="root"></div> </body> </html> |
Step 5: Creating toast notifications in App.js: Firstly we will import the toaster component from the react-hot-toast package to use in our project.
import toast, { Toaster } from 'react-hot-toast';
Then we will add a custom CSS file for overriding some of the default styles.
To create a toast notification in our application, we need to add a toaster component “<Toaster/>” and then we can call it from anywhere as toast(“custom message”).
We have a few buttons, and by pressing them, we may create numerous toasts. We’ll make a success toast, a notification toast, and an error toast. All notifications are aligned at the top center by specifying the position in the toaster component. We’ll add a multiline toast and set the duration for it. Then, we will create a themed toast by adding a unique style to it. We will prepare a dark toast and place it at the bottom center.
App.js
Javascript
import React from "react"; import toast, { Toaster } from "react-hot-toast"; import "./App.css"; import "./style.css"; const notify = () => toast("Welcome to neveropen"); const success = () => toast.success("Successfully registered"); const error = () => toast.error("Oops! An error occurred."); const bigToast = () => toast( `neveropen is a Computer Science Portal for Geeks .\n\nIt contains well written, well thought and well explained computer science and programming articles .`, { duration: 4000, } ); const themedToast = () => toast( "Browse courses or read articles .", { style: { border: "1px solid green", padding: "16px", color: "green", }, } ); const darkToast = () => toast("Hello contribute to gfg!", { icon: "????", style: { borderRadius: "12px", background: "#333", color: "#fff", }, position: "bottom-center", }); function App() { return ( <> <div className="notificationContainer"> <p> Toasting Notifications </p>{" "} <button onClick={notify}> Notification Toast </button>{" "} <button onClick={success}> Success Toast </button>{" "} <button onClick={error}> Error Toast </button>{" "} <button onClick={bigToast}> Multiline Toast </button>{" "} <button onClick={themedToast}> Themed Toast </button>{" "} <button onClick={darkToast}> Dark Toast </button>{" "} </div>{" "} <Toaster position="top-center" reverseOrder={true} /> </> ); } export default App; |
Step 6: Let’s style our notification application. Add the following code in your style.css file.
style.css
CSS
.notificationContainer { margin: auto; width: 100%; text-align: center; position: absolute; top: 50%; transform: translate(0, -50%); } button { margin: 1rem; font-size: 1.5rem; cursor: pointer; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.2); padding: 1rem; } p { font-size: 2rem; color: green; } |
Step 7: Your index.js file should look like this. The index.js file serves as the main entry point, and inside it, the App.js file is rendered at the root ID of the DOM.
index.js
Javascript
Javascriptimport React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; ReactDOM.render(<App />, document.getElementById("root")); |
Our notification application is ready.
Step to run the application: Run the application by using the following command:
npm start
Output: By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser. This is how our application looks :
Our application will allow us to make numerous toast notifications simply by clicking various buttons.
Output : Notification application
Reference: https://react-hot-toast.com/
