Create a TypeScript React notification Component from zero

garryxiao

Garry Xiao

Posted on August 12, 2020

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.

๐Ÿ’– ๐Ÿ’ช ๐Ÿ™… ๐Ÿšฉ
garryxiao
Garry Xiao

Posted on August 12, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

ยฉ TheLazy.dev

About