Packages

React inside Phoenix LiveView — async code splitting, client-side props diffing, and zero-config component discovery.

Retired package: Release invalid - Not production-ready, LiveView 1.0.x compatibility issue

Current section

Files

Jump to
react_phx assets copy js app.js
Raw

assets/copy/js/app.js

import "phoenix_html";
import { Socket } from "phoenix";
import { LiveSocket } from "phoenix_live_view";
import hooks from "virtual:react-phx";
let csrfToken = document.querySelector("meta[name='csrf-token']")?.getAttribute("content");
let liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
hooks: { ...hooks },
});
liveSocket.connect();
window.liveSocket = liveSocket;