Create a TypeScript React notification Component from zero
Garry Xiao
Posted on August 12, 2020
Why not use the existing packages? They don't fulfill my requirements. I define the component to do:
- Existing popular features should be there.
- Totally written in TypeScript.
- A framework to work with different UI frameworks like Material-UI. This means I could totally define the appearance being consistent.
- 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:
- A pure TypeScript/JavaScript package with all features described and partially implemented.
- A React component based on the previous package has a full implementation.
- 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 August 12, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.