DEV Community

Garry Xiao
Garry Xiao

Posted on • Updated on

Create a TypeScript React notification Component from zero

Why not use the existing packages? They don't fulfill my requirements. I define the component to do:

  1. Existing popular features should be there.
  2. Totally written in TypeScript.
  3. A framework to work with different UI frameworks like Material-UI. This means I could totally define the appearance being consistent.
  4. Keep the codes neat and easy to understand, and easy to follow for extending.

So the task will be split into 3 parts or levels:

  1. A pure TypeScript/JavaScript package with all features described and partially implemented.
  2. A React component based on the previous package has a full implementation.
  3. A Material-UI version to customize the appearance and behaviors.

Here is help link about how to create a repository:

Task 1:
Step 1: Create a repository at
Step 2: Architect, An abstract class Notification presents the message to display. A NotificationContainer class presents a global container for the components, includes add, remove, and registered methods.

Task 2:
Step 1: Create a repository:
Step 2: NotificationReact extends Notification to support under React environment. NotificationDisplay is a React component to display notifications. It will register the update method to the NotificationContainer and achieve notifications add and remove actions.

Task 3:
Step 1: Create a repository:
Step 2: NotificationMU extends Notification to support Material-UI framework. NotificationDisplayMU is a Material-UI implmentation for NotificationDisplay.

Task 4:
A shared package applied:

Please follow the source codes to get a very basic understanding of architectural design. Use the template support of Github repository, split the requirements into 3 parts as micro packages. It may delay the development progress but would benefit the long-term maintenance and improvements.

Top comments (0)