Open thoriqadillah opened 6 months ago
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
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
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')
}
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
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
I understand now. Where should I create the emitter?
Inside your toast
still getting this error after adding.
maybe im not getting you
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
Got it to work and i want to personally thank you! @thoriqadillah
Emiting closeToast from custom component works. Thanks @thoriqadillah for writing it here, it helped me.
Mentioning it in documentation would be helpful to others.
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 notbtw, i use vue-shadcn port here is my implementation