ardeora/solid-toast

Toast style reactivity

kakserpom opened this issue · 5 comments

kakserpom commented

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 commented

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 commented

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

  • 👍1
Brendan-csel commented

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 commented

Any news?

ardeora commented

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 😊