Crafting a Customizable Toast Component with React
Getting Started with React and Vite
To create a custom toast component, we’ll begin by setting up a React application using Vite. First, ensure Node.js is installed on your computer, as it comes with npm. Open a terminal, navigate to the desired project folder location, and run the command npm init vite@latest. Follow the Vite instructions to name your project folder, choose React as the framework, and select JavaScript as the variant. After installation, navigate into the project folder and install the required dependencies by running npm install or npm i.
Structuring the Project Folder
Our project folder will have a default structure with an src folder, where we’ll do most of our work. Inside src, create a new folder called components. We’ll add our toast and button components to this folder. We’ll use functional components throughout this tutorial, which is also recommended by the React team.
Designing the Toast Component
Let’s create a toast component that will contain and wrap up the contents of every toast notification. We’ll add a role attribute to make the notifications ARIA-friendly. Inside the toast element, we’ll add other elements to display the close button, notification icon, and toast notification message.
Styling the Toast Component
Before moving on to the React part, let’s discuss the styling. We’ll add CSS custom properties that contain color and spacing information. These properties will be used in various parts of our toast component. We’ll enhance the appearance of our toast component by applying basic coloring and shadows, adding rounded corners, and making it slightly opaque to create a notification-like effect.
Creating the Toast Component in React
Taking the above-defined CSS styles and HTML structure into account, let’s work on the React part. Inside the Toast.jsx file, create an arrow function called Toast and set the export function as default. We’ll add some props, including type, message, and onClose. The type prop determines the type of toast notification, while message is the text displayed in the notification. The onClose prop is a callback function that will be invoked when the close button is clicked.
Structuring the Toast List Component
The toast notifications should be flexible enough to be placed across all four corners of the viewport. We’ll have four different positions for the toast elements, which will be determined by a container list that will wrap up all our toast notifications.
Styling the Toast List Component
Let’s create another folder inside the components directory named ToastList. Inside it, create a CSS file named ToastList.css, which is responsible for styling, structuring, and positioning our ToastList component, as well as adding appropriate animations to the toast notifications.
Creating the ToastList Component in React
Let’s define the list component now and add some props. The ToastList component takes in three props: data, position, and removeToast. The data prop represents an array that will contain objects, position determines the placement of the toast list on the page, and removeToast acts as a callback to be provided to the onClose attribute of the Toast component.
Implementing Toast and ToastList Components
To achieve a consistent display across all browsers, let’s incorporate a global stylesheet that establishes default settings and normalizes the appearance of specific elements. We can accomplish this by modifying the index.css file.
Displaying Toast Notifications
Let’s begin by importing React and the useState Hook into our App.jsx file. By using the useState Hook, we can establish state variables to effectively manage and track various data states within our application. We’ll create a function called showToast and pass two parameters called message and type.
Deleting Toast Notifications
Removing an individual toast notification is a relatively straightforward task. To accomplish this, we can make use of a function that accepts an id parameter. By filtering the array of toast notifications, we can quickly identify and remove the notification that doesn’t correspond to the given id, and then apply this filtered array using the setToasts method.
Auto-Deleting Toast Notifications
Before addressing the auto-close duration input for the toasts, we need to handle the auto-close checkbox input, which enables or disables the duration input. Additionally, whenever the value of this checkbox changes, we should clear all existing toasts to ensure their display remains synchronized.
Positioning Toast Notifications
Once again, we can retrieve the position inputs from a select combo box by utilizing the target event property. Setting the current position requires just a single line of code.
Adding the ToastList Component
Finally, we conclude our app component file by adding ToastList at the end. We’ll use the toast and position state variables that we declared in the app component above. Additionally, we’ll pass the removeToast function as the removeToast prop of ToastList before exporting it as a default module.