phoenix_live_react v0.6.0 PhoenixLiveReact View Source

Render React.js components in Phoenix LiveView views.

Link to this section Summary

Functions

Render a react component in a live view.

Link to this section Functions

Link to this function

live_react_component(name, props \\ %{}, options \\ [])

View Source

Render a react component in a live view.

<%= PhoenixLiveReact.live_react_component("Components.MyComponent", %{name: "Bob"}, id: "my-component-1") %>

Events

To push events back to the liveview the pushEvent and pushEventTo functions from Phoenix LiveView are passed as props to the component.

  • pushEvent(event, payload, (reply, ref) => ...) - push an event from the client to the LiveView
  • pushEventTo(selector, event, payload, (reply, ref) => ...) - push an event from the client to a specific LiveView component
  • handleEvent(event, handler) - (phoenix_live_view >= 0.14) receive data directly through liveview push_event
const { pushEvent, pushEventTo, handleEvent } = this.props;
pushEvent("button_click");
pushEvent("myevent", {"var": "value"});
pushEventTo("#component-1", "do_something")

handleEvent("some-event", (payload) => console.log(payload))

Parameters

  • name: String with the module name of the component
  • props: Map or keyword list with the props for the react component
  • options: Keyword list with render options

It is possible to override both the receiver and the container div's attributes by passing a keyword list as :container and :receiver options.

You can also override the tag type with the :container_tag and :receiver_tag options

By default, LiveView uses phx- as the binding prefix. You can override this with the :binding_prefix option.

<%=
  PhoenixLiveReact.live_react_component("Components.MyComponent", %{},
    id: "my-component-1",
    container: [class: "my-component"],
    container_tag: :p
  )
 %>