PhoenixLiveReact

To use phoenix_live_react, you must add it to your Elixir dependencies and connect the JavaScript hooks to your LiveView socket.

1. Add Elixir Dependency

Add {:phoenix_live_react, "~> 0.5"} to your mix.exs file and run mix deps.get.

2. Connect JavaScript Hooks

In your app.js, import LiveReact and initLiveReact, then include LiveReact in your LiveSocket hooks configuration. You can optionally call initLiveReact() on DOMContentLoaded to speed up initial rendering (note: pushEvent, pushEventTo, and handleEvent props are not available during this initial client-side render).

3. Import Helper in Elixir

Import PhoenixLiveReact in your web module (e.g., lib/MyAppWeb.ex) within the live_view quote block to make the component helpers available to your views.

# mix.exs
def deps do
  [
    {:phoenix_live_react, "~> 0.5"}
  ]
end

// app.js
import LiveReact, { initLiveReact } from "phoenix_live_react"

let hooks = { LiveReact }

let liveSocket = new LiveSocket("/live", Socket, { hooks, params: { _csrf_token: csrfToken } })

// Optional: render on page load for speed
document.addEventListener("DOMContentLoaded", e => {
  initLiveReact()
})

# lib/MyAppWeb.ex
def live_view do
  quote do
    import PhoenixLiveReact
  end
end

The library exports a default hook object (represented as y in the source) designed to be used within a Phoenix LiveView Hook. When this hook is used, it manages the React lifecycle (mounting, updating, and unmounting) automatically.

Hook Lifecycle Methods:

• mounted(): Initializes the React component. It reads the component class from data-live-react-class and props from data-live-react-props. If data-live-react-merge is present, it merges the data attributes with the provided options.
• updated(): Re-renders the React component when the LiveView element is updated.
• destroyed(): Unmounts the React root to prevent memory leaks.

// Example of using the default hook in your app.js
let LiveReactHook = {
  mounted() {
    // The default hook logic is applied here
    // It uses data-attributes on this.el to find the component and props
  },
  updated() {
    // Re-renders component on LiveView update
  },
  destroyed() {
    // Unmounts React component
  }
};

let callbacks = {
  mounted: LiveReactHook.mounted,
  updated: LiveReactHook.updated,
  destroyed: LiveReactHook.destroyed
};

let Socket = require("phoenix").Socket;
let liveSocket = new Socket("/socket", {params: {token: window.token}});

liveSocket.connect()
  .then(() => liveSocket.join("room:lobby"))
  .then(() => {
    let liveSocket = new LiveSocket("/live", Socket, {params: {}});
    liveSocket.connect({params: {}}).then(() => {
      // Register the hook
      Phoenix.LiveSocket.register("LiveReact", callbacks);
    });
  });

PhoenixLiveReact automatically passes LiveView event functions as props to your React component. You can use these to communicate from the client-side React code back to the Elixir LiveView.

Available Props:

• pushEvent(event, payload, (reply, ref) => ...): Pushes an event from the client to the LiveView.
• pushEventTo(selector, event, payload, (reply, ref) => ...): Pushes an event from the client to a specific LiveView component (using a CSS selector).
• handleEvent(event, handler): (For phoenix_live_view >= 0.14) Allows receiving data directly through LiveView push_event.

Example Usage in React:

const { pushEvent, pushEventTo, handleEvent } = this.props;

// Push a simple event
pushEvent("button_click");

// Push an event with a payload
pushEvent("myevent", {"var": "value"});

// Push to a specific component via selector
pushEventTo("#component-1", "do_something");

// Handle incoming events
handleEvent("some-event", (payload) => console.log(payload));

Phoenix LiveView automatically passes three event functions as props to your React components. These allow the React component to communicate back to the server.

Available Props

• pushEvent(event, payload, (reply, ref) => ...): Pushes an event from the client to the LiveView.
• pushEventTo(selector, event, payload, (reply, ref) => ...): Pushes an event from the client to a specific LiveView component (using a CSS selector).
• handleEvent(event, handler): (Requires phoenix_live_view >= 0.14) Allows receiving data directly through LiveView's push_event mechanism.

Usage Example

const { pushEvent, pushEventTo, handleEvent } = this.props;

// Push to the current LiveView
pushEvent("button_click");
pushEvent("myevent", {"var": "value"});

// Push to a specific component via selector
pushEventTo("#component-1", "do_something");

// Listen for events from the server
handleEvent("some-event", (payload) => console.log(payload));