larshei

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

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 scroll to that specific area.

To have the button reusable, it would be great to do something like

#... in ~H/render
<.button phx-hook="ScrollTo" scroll-target="main">To Top<button>
<.button phx-hook="ScrollTo" scroll-target="footer">To Bottom<button>

What I tried

I went through the docs but could not find an option to define custom data that is then available in the hook. This seemed to only be an option for push_event from the server. So I tried some random stuff, like addingdata="main" or phx-value-data="main" or phx:data="main", then inspected/console.log’d the event, but I could not find the custom data anywhere.

Question

Is there an option to pass custom, known at render,-time data to a client side hook?

Or should I maybe even generate a script section and generate the script on render?

Any ideas are welcome Thanks!

8 comments

/phoenix #liveview #hooks

0 1205 8

2023-07-21 13:04:33 UTC

Marked As Solved

codeanpeace

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 Top</button>

Post #6

Also Liked

benlime

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;
    
    // when using JSON data
    return this.el.dataset.bar && JSON.parse(this.el.dataset.bar);
  },
  mounted() {
    console.log('data from bar:', this.getBar());
  },
};

<.button phx-hook="Foo" data-foo="hello">Click Me</.button>
<.button phx-hook="Foo" data-foo={Jason.encode!(%{ bar: "world"})}>Click Me</.button>

I use that approach all the time if I want to process some data and the data is cheap to render inside the template.

Use `pushEvent` to send an init message and get the data via the reply.

const Foo = {
  mounted() {
    this.pushEvent('Foo:init', {}, (reply) => {
      if (reply.foo) {
        console.log("Got data for foo", reply.foo);
      }
    });
  },
};

In your LiveView:

<.button phx-hook="Foo">Click Me</.button>

def handle_event("Foo:init", _params, socket) do
  {:reply, %{foo: "bar"}, socket}
end

This approach is more suitable if you need to perform more complex tasks or have big payloads. For example I use this to initialize a rich text editor with a state stored in the db.

Post #8

cmo

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

Post #3

larshei

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