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