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
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
)
%>