-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Handle dynamic change to toast height #75
base: master
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for your PR!
Curious—what happens on mount? Is there a flash of unstyled content if the initial height is undefined?
TLDR: There shouldn't be any observable difference for toasts whose height don't change.
function onHeightChange(clientHeight: number) {
console.log("heightChange", clientHeight)
if (clientHeight === undefined) return;
setHeight(clientHeight);
}
onMount(async () => {
console.log("mount");
await Promise.resolve();
console.log("next microtask")
})
The only difference from this PR that I can think of for fixed-height toast, is when a toast is queued while executing a long-running task. Before this PR, toast's duration is measured from mount. With this PR, toast's duration is measured from add, so toasts may be destroyed before it has a chance to render. Would that be an issue? |
Fixes #51
Change toast's height property when toast wrapper div's height changes.
Note that we cannot use below one liner:
because
setHeight
is re-created whenevertoasts
is modified.In Action
Screen.Recording.2024-08-13.at.9.51.43.PM.mov
You can test it with following example code: