Requirements
Here are the requirements of the <Toast/> UI that I defined
- It should render regardless of routing. Some of them should render on button clicks while the others should render right after fetching.
- It should pop up for 3 seconds and disappear.
- It should be placed on top of everything. Nothing should override it.
- It should be placed inside the Box on the desktop devices.
- There should be different texts based on contexts, such as:
- The upload has been canceled.
- Contact has been saved successfully.
- Your account has been deleted successfully.
- You've signed out of Majorfolio successfully.
- We'll send you a verification email.
Restrictions
- It should be in the top-level component since it should render regardless of routing.
- It seems hard to place Toast in the right position. It gets worse since there can be multiple Toast Messages.
Therefore, I decided to look into some libraries, and React-Toastify caught my attention.
What React-Toastify offers
React-Toasitify
- stacks notifications
- supports swipe to close
- pause toast when the window loses focus
- support nice and tidy default animations
- can display a react component inside the toast
- sets Toast with
role="alert"for accessibility
Positioning Problem
<ToastContainer/> was set with position="bottom-center" prop and it was positioned in the wrong position.
- to be continued
Top comments (0)