loading...

Create a TypeScript React notification Component from zero

garryxiao profile image Garry Xiao Updated on ・2 min read

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.

Posted on by:

garryxiao profile

Garry Xiao

@garryxiao

From China, living in NZ now, a startup founder, architect, senior software developer and team lead

Discussion

markdown guide