（筆記）Toast Notification

[gracekrcx]

Portals

Portals purpose: A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container. For example, dialogs, hovercards, and tooltips.

Ref

如何與 Portal interact 從 app component

1. app component pass 一個 function 到 toast portal
2. 如何讓 toast portal component 有一個 function 然後從 app component 去 call 2.1 global 的方式：context or redux 2.2 -> use refs to communicate with our toast portal component ---> we want create a function inside toast portal that we to call using that ref in app component ---> the function that we want to call inside of toast portal from our app component is the ability to 『create a new toast』, we want the toast portal itself to house the function and house the toast's state 因為如果不這樣做 the app component would have to the component that manages the toast state and the function for adding toast ---> 是以設計成可以給別人使用的 library 去想

---> toast portal itself is what is managing that list of toasts

forwardRef

useImperativeHandle

closure

the way that useEffect works in tandem with like setTimeout

[gracekrcx]

Architecture

two components one is toaster service or a toaster controller or toast portal two is toaster component and we will pass configuration into the toast portal