x-show with settimeout

[rickavmaniac]

Hi,

A common pattern we face everyday is showing a message and hide it after 3 sec.

It would be could if Alpine could have a shortcut for that like

x-show.timeout.3000ms(show)

That would be equivalent to setTimeout(() => show = false, 3000)

[ryangjchandler]

@rickavmaniac Interesting idea! For now, you could achieve this using $watch.

$watch('nameOfProp', function (value) {
    if (value) {
        setTimeout(() => show = false, 3000)
    }
})

[Sambuxc]

Where would one put this? inside te x-init attribute of the element or in a script tag?

[SimoTod]

In v3, you can use also use x-effect to keep it next to the x-show directive: https://codepen.io/SimoTod/pen/PoyBgJY

[Sambuxc]

Now that is fantastic! Thanks so much ♥️

[Gangadhar500error]

success alert

this code will be work I runned same

[Gangadhar500error]

{{ session("timelinesuccess") }}

[ekwoka]

Generally, in the part that creates the message, it's easy enough to just set a timeout right there.

or if the element is in a template x-if or x-for, you can just do x-init="setTimeout(() => show = false"

[Sambuxc]

Sorry, but this isn't correct from what I needed. x-init will execute the code when the page is loading, rather than when the element is shown if using x-show.

[ekwoka]

If it's shown with x-if it will.

which is why the first part of the sentence was there.

I was providing alternatives since you didn't provide much detail at all regarding what the specifics of the implementation are, and a rearchitecting may allow a cleaner result.

[Sambuxc]

Okay thanks 🙏🏽

[Gangadhar500error]

{{ session("timelinesuccess") }}