Toast style reactivity

[kakserpom]

Example:

<Toaster
    position="top-right"
    gutter={24}
    toastOptions={{
        style: darkMode() ? {
            background: '#363636',
            color: '#fff',
        } : {},
    }}
    containerStyle={{'margin-top': '50px'}}
/>

Changes of darkMode only get applied to new toasts, but not pre-existing ones. Is there a way to pass reactivity inside a toast?

[Brendan-csel]

I'm not familiar with the code but it looks like there is a createToast function that destructures the default toaster options - so the individual toast would not be reactive to any changes in those default options.

My guess is the code needs to be refactored to merge the options while rendering the toast - instead of when adding toasts to a data structure like now.

[ardeora]

Thanks for pointing this out. Yeah I need to take a deeper look at what would be the best approach to achieve reactivity on the options level

[Brendan-csel]

You could do...

export const createToast = (message: Message, type: ToastType = 'blank', options: ToastOptions): Accessor<Toast> => 
   createMemo(() => ({.....})

But toast then becomes an accessor so would need to become toast() anywhere that used it.

[kakserpom]

Any news?

[ardeora]

Apologies for the late reply. I was on vacation last couple of weeks. I will take a look at this, this week. Also, PRs are always welcome 😊