DEV Community

Garry Xiao
Garry Xiao

Posted on • Edited on

3 1

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: https://dev.to/garryxiao/build-a-react-components-npm-package-and-ci-cd-with-github-action-1jm6

Task 1:
Step 1: Create a repository at https://github.com/ETSOO/NotificationBase
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: https://github.com/ETSOO/NotificationUI
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: https://github.com/ETSOO/NotificationMU
Step 2: NotificationMU extends Notification to support Material-UI framework. NotificationDisplayMU is a Material-UI implmentation for NotificationDisplay.

Task 4:
A shared package applied: https://github.com/ETSOO/Shared

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)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay