Hello beloved forum people! I am currently looking for an option to have a LiveView JS Hook which I can pass custom data to, fully client side. What do I want to achieve? The idea is to have a “ScrollTo” hook which I can put on e.g. buttons and add a scroll target, then on click have the webpage s…

If the payload’s only the dom selector, then you might not even need the detail option if you specify the to option and use event.target in the event handler. window.addEventListener("scrollTo", event => event.target.scrollIntoView(true)) <button phx-click={JS.dispatch("scrollTo", to: "#main")}>To…

I am not very smart some days :see_no_evil: I can simply add an onclick with embedded JS. However, I wonder if there is a more phoenix-y way. Component attr :target, :string, required: true def scroll_button(%{target: "#"<>id} = assigns) do ~H""" <.button onclick={"(function(){document.g…

On my phone but phx-click and the JS module functions should let you send data on click.

<button phx-click={JS.dispatch("click", to: ".nav")}>Click me!</butuon> Phoenix.LiveView.JS — Phoenix LiveView v1.2.5

Hey thanks for the suggestion. I stumbled over this one while going through the docs. Looks like I can trigger an event, but not add any payload? :thinking:

Uh, I like that! Thanks for the suggestion. Side node if anyone stumbles over this later: At first I changed the event name "scrollTo" to "scroll" and got hundreds of errors in the browsers log, because "scroll" is an actual event that is fired when the user is scrolling :sweat_smile:

Although you found a kind of solution I’d like to add what I am doing when I need custom data in a hook. There are two approaches which I found useful. Use a data attribute and fetch it from the hook mount callback. const Foo = { getBar() { // on string data return this.el.dataset.bar; …

Elixir Programming Language Forum

Pass custom/render-time data to LiveView client side hook

Questions & Help Questions

cmo July 20, 2023, 4:08pm 6

That’s what the detail map is for.