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

Phoenix Forum Questions / Help
, ,
1

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 :slight_smile: Thanks!

2

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.getElementById(\"#{id}\").scrollIntoView(true);})();"}
  >
    <%= render_slot(@inner_block) %>
  </.button>
  """
end

# .. more cases for class and type match

Call

<.scroll_button target="#top" >To Top</.scroll_button>
3

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

4

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

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html#dispatch/2

1 Like
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:

6

That’s what the detail map is for.

7

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>
3 Likes
8

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:

1 Like
9

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.

2 Likes