React Notifications Without Dependencies
Let’s build a good looking notification system for React that has no dependencies and doesn’t need a state manager.
There is a time (hopefully early on in the project) were the dev team must ditch the console.logs and inconsistent error labels and define a unified way to show notifications to users.
Let’s build a hyper lightweight notification system that has no dependencies other than the standard react libraries and doesn’t need a state manager. Using a state manager will definitely improve the features we can add to the system, but let’s save that for a future post.
A functional demo can be found on Github: https://github.com/agustincastro/react-notifications
As the previous image shows I’ll use the popup’esque style of notifications sometimes called Snackbars. Everything about the style I presented can be easily changed, I just aim to present the approach.
And what will that approach be?
- We will create a Snackbar component that will receive the message type(success, info, error, warning), the autohide timer, and the title and subtitle.
- A hook html tag with id=”snackbar-fixed-container” is placed in the main .html file…
