How to Create a Custom Notification Component in React

There are several third-party packages available in React that can help you create a notification component. However, if you just want a simple notification component, you may want to create your own to avoid adding unnecessary dependencies to your application.

Setting Up the Project

You will use Vite to set up the React app. Vite is a build tool that lets you quickly scaffold a React project.

To get started, use the yarn package manager to create a new Vite project by running the command below.

        yarn create vite

The command will prompt you to enter a project name. Enter the name of the project and press Enter. Next, it will prompt you to select a framework. Choose react and press Enter. Finally, it will ask you to select a variant, choose JavaScript and then press Enter.

Here are the configurations this tutorial will use:

After Vite creates the project, navigate to the project folder and open it using a code editor.

You can then start the development server by running the following command.

        yarn dev

This will open your new React application in your default browser at http://localhost:5173/.

Designing the Notification Component

In order to create a flexible notification component, it needs to be able to handle different types of notifications with varying titles, descriptions, and styles. For example, it needs to render a warning, success, and error notification.

Here are different variations the notification component should be able to render.

You can achieve this by passing props to the component that specifies the type of notification to render, the title, and the description text. By using these props, you can customize the component and reuse it throughout your application with minimal effort. If you need a refresher on props, here is an article that explains how to use props in React.

Creating the Notification Component

In the src folder, create a new file named Notification.jsx and add the following code.

        export default function Notification({type, title, description}) {
  return (
    <div>
        {/* Notification content */}
    </div>
  )
}

This code creates a functional component called Notification with three props: type, title, and description. You will use these props to customize the notification's style and content.

From the design, the component has a couple of icons, namely information, and a cross icon. You can download free-to-use icons or use an icon component from a package such as react-icons. This tutorial will use react-icons so install it by running the command below.

        yarn add react-icons

Then import the icons at the top of the Notification component.

        import { RxCross2, RxInfoCircled } from "react-icons/rx"

Now, you can modify the component to use the icons, the title, and the description prop values to create the content of the notification.

        export default function Notification({type, title, description}) {
  return (
    <div>
        <div>
            <RxInfoCircled/>
            <div>
                <div>{title}</div>
                <div>{description}</div>
            </div>
        </div>
        <RxCross2/>
    </div>
  )
}

The next step is to style it depending on the type passed in.

One approach you can take is to define CSS classes for each type of notification you want to display. You can then conditionally apply the appropriate class based on the type that is passed in.

To begin, create a new file called notification.css and import it in Notification.jsx by adding the following code at the top.

        import "./notification.css"

Then in notification.css define the base styles for the notification component:

        .notification {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 8px;
}
.notification__left {
  display: flex;
  flex-direction: row;
  padding: 0px;
  gap: 8px;
  margin-right: 24px;
}
.notification__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
}
.notification__title {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
}
.notification__description {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  padding: 0;
}

You can then define the styles for the different notification types by adding the following code in the CSS file.

        .notification__success {
  background: #f6fef9;
  border: 1px solid #2f9461;
  border-radius: 8px;
}

.notification__error {
  background: #fffbfa;
  border: 1px solid #cd3636;
  border-radius: 8px;
}
.notification__warning {
  background: #fffcf5;
  border: 1px solid #c8811a;
  border-radius: 8px;
}

The above code styles the notification container based on the type passed in.

To customize the title, use the following styles.

        .notification__title__success {
  color: #2f9461;
}

.notification__title__warning {
  color: #c8811a;
}
.notification__title__error {
  color: #cd3636;
}

For the custom description text, use these styles.

        .notification__description__success {
  color: #53b483;
}

.notification__description__warning {
  color: #e9a23b;
}
.notification__description__error {
  color: #f34141;
}

And for the icons, use the following classes.

        .notification_icon_error {
  color: #cd3636;
}
.notification__icon__success {
  color: #2f9461;
}

.notification__icon__warning {
  color: #c8811a;
}

Then, in the Notification component, you can conditionally apply the appropriate class based on the type prop, like this:

        export default function Notification({type, title, description}) {
  return (
    <div className={`notification notification__${type}`}>
        <div className={`notification__left`}>
            <RxInfoCircled className={`notification__icon__${type}`}/>
            <div className="notification__content">
                <div className={`notification__title notification__title__${type}`}>{title}</div>
                <div className={`notification__description notification__description__${type}`}>{description}</div>
            </div>
        </div>
        <RxCross2 className={`notification__icon__${type}`}/>
    </div>
  )
}

In this component, you are dynamically setting the class depending on the type such as notification__success or notification__error.

To see this in action, import the Notification component in App.jsx and use it as follows:

        import Notification from './Notification'

function App() {
  return (
    <>
      <Notification
        type="success"
        title="Task Completed"
        description="Your task has been completed successfully."
      />
    </>
  )
}

export default App

Now, you can pass a different type to the Notification component and render an appropriate notification that matches the message.

This is essential for a good user experience because users have come to associate different colors and styles with different scenarios, and it's important to use those associations consistently. For example, it would be confusing to let a user know they successfully uploaded a photo in a red notification box. They might think the upload failed, even if it was successful.

Adding Interactivity to the Notification Component

You’ve learned how you can use props to create a customizable notification component. To take it even further, you can add transitions to this component to make it more engaging. For example, you can use CSS animations to slide the notification component to the screen and slide it out after a certain duration has passed.