phoenix_live_react v0.2.1 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"}) %>

Events

To push events back to the liveview the pushEvent function from Phoenix LiveView is passed as a prop the the component.

  • pushEvent(event, payload) - method to push an event from the client to the LiveView server
const { pushEvent } = this.props;
pushEvent("button_click");
pushEvent("myevent", {"var": "value"});

Parameters

  • name: String with the module name of the component
  • props: Map 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", %{},
    container: [class: "my-component"],
    container_tag: :p
  )
 %>