can we dismiss the toast programmatically? `toast.dismiss()` does not work

[Thoriq Adillah]

i am working on GUI using wails, and I tried to make my own toast because somehow the toast can't be styled using the toast option you provided using tailwind. and the toast itself is not really match up the design of my app, so i need to make my own anyway

the problem is, when i tried to use my own component, the value from the option somehow still appearing outside my component. and i am struggling to dismiss the toast because toast.dismiss() is not working. i don't know if this has something to do with wails or not

btw, i use vue-shadcn port
here is my implementation

// some imports

export type ToastOption = Omit<ExternalToast, 'invert' | 'icon' | 'important' | 'style' | 'unstyled' | 'descriptionClassName' | 'className' | 'promise' /** | 'action' */ > & {
    type?: NonNullable<Parameters<typeof toastVariants>[0]>['text']
    action?: {
        label?: string,
        icon?: Component,
        onClick: () => void
    }
}

export type ToastProps = ToastOption & {
    title: string
}

export function toast(title: string, data?: ToastOption) {    
    callToast(markRaw(
        defineComponent({ render: () => h(Toast, { title, ...data }) })), 
        { 
            ...data,
            // description: undefined,
            // onAutoClose: data?.onAutoClose,
            // onDismiss: data?.onDismiss,
            // duration: data?.duration,
            // cancel: data?.cancel,
            // id: data?.id || new Date().getTime().toString(),
        }
    )
}

[Thoriq Adillah]

i found the answer. after looking trough your code, it turns it will close the sonner after the custom component emits closeToast event

can you at least give us more concise documentation about this component so that we don't have to look deeper into your code? I think diving deeper to the code is not really necessary if we have good documentation

[Ishai Avrahami]

Hi, did you find the solution to this? When i dismiss my custom toast it throws an error in the console that breaks it.

Please help if you can @thoriqadillah

[Thoriq Adillah]

Just create emitter with name closeToast. For closing the toast, just emit it like this, after that the vue-sonner will take care of closing the toast

const props = defineProps<ToastProps>()
const emit = defineEmits<{
    (e: 'closeToast'): void
}>()

function dismiss() {
    if (props.onDismiss) props.onDismiss({ id: props.id! })
    emit('closeToast')
}

function click() {
    if (props.action) props.action.onClick()
    emit('closeToast')
}

[Ishai Avrahami]

I’m not sure I understand. I use the standard toast.dismiss() but it throws an error. What example did you provide me above. PS I’m using Js not Ts @thoriqadillah

[Thoriq Adillah]

If you create your custom toast, toast.dismiss will not work (i forgot the reason tho). I think the toast.dismiss only close the original toast, not our custom toast.

Vue sonner do not provide clear api to close the toast. After going deeper into the code, it turns out that to close the toast, we need to create emitter named closeToast and then emit it. Just try it out, and see if that works

[Ishai Avrahami]

I understand now. Where should I create the emitter?

[Thoriq Adillah]

Inside your toast

[Ishai Avrahami]

still getting this error after adding.

maybe im not getting you

[Thoriq Adillah]

Take a look at my code (might as well shameless plug my project lol)

In Toast.vue is my custom toast using the vue-sonner
In index.ts is how i define the composable (function that calls the toast)

I'm using typescript tho, so i hope you understand some typescript, and i think you should start using typescript at some point

But, the most important thing is in Toast.vue. There, you define your emitter named closeToast. And when the user click close button or something, emit the closeToast to close the vue-sonner

[Ishai Avrahami]

Got it to work and i want to personally thank you! @thoriqadillah