Toasts are the small little notification messages that popup on front-end applications to notify the user of some current actions that have happened. Toasts are essential and help in notifying the user of success and error events primarily. In this task, you are required to code a custom Toast component.
Toasts
component that is responsible for showing notifications on the page.Toasts
component should take in a configuration
of various parameters.Title
- To display the notification contentIcon
- Display relevant iconsPosition
- Where the notification should be shown on the page.Toast
should have a close
icon - which when pressed should remove the toast from the DOM.duration
parameter, after the specific duration has passed, the notification should be removed automatically.Click to reveal
Use an array to store the toasts as soon as they're created.
Click to reveal
To delete a toast, filter()
method can be useful.
Click to reveal
To take care of the position
, you can keep track of 4 points, top-left
, top-right
, bottom-left
and bottom-right
. Based on it, the top, bottom, left and right
properties of position: absolute
can be managed.