Live_react - React inside Phoenix LiveView

[MRdotB]

I needed to reuse React components from my Chrome extension in my Phoenix/LiveView backend. I noticed that for Svelte/Vue, there are live_vue and live_svelte. So, I created the equivalent in React, live_react:

https://github.com/mrdotb/live_react

Here is a small demo on Fly: demo.

I have not yet implemented SSR, slots, sigil, and the macro to generate components.

[johnknott]

Great work! I do wonder if there is some kind of shared abstraction these libraries could build on - if there was something like live_vite or live_frontend, or something like that, then have adaptors for each FE framework.

[MRdotB]

The LOC of each library is quite short but specific to Vite, Svelte, React.

	Builder	JS Prod
live_svelte	Custom esbuild	none
live_vue	vite	vue
live_react	hex esbuild	react, react-dom

Have a look at the hooks.js of each
https://github.com/Valian/live_vue/blob/main/assets/js/live_vue/hooks.js
https://github.com/woutdp/live_svelte/blob/master/assets/js/live_svelte/hooks.js
https://github.com/mrdotb/live_react/blob/main/assets/js/live_react/hooks.js

[orion]

Great work! Thank you for live_react!

I’m not sure if it’s what @johnknott had in mind but have you looked at Komodo?

Komodo - easily render React, Svelte, Vue, Angular, any JS framework component from Liveview

Hi there! I’ve created a small library, Komodo, that allows easy use of JS framework components from Phoenix LiveView. Each framework just needs a small piece of easy-to-write Javascript adapter code to work with it (this is already provided for React, Svelte, Vue and Web Components). [komodo-short] Rationale There are a few libraries already out there for rendering JS components (for React, Svelte, etc.) from LiveView, however I personally wanted a few things which they all seemed to be mis…

[MRdotB]

live_react has been picking up interest, as seen in projects like PhoenixAnalytics. Inspired by the Server-Side Rendering (SSR) features in live_svelte and live_vue, I’ve implemented it for live_react.

I released a 0.2.0-beta and will release 0.2.0 when I’m confident the SSR feature is production ready.

ssr demo

[MRdotB]

I released the stable v1.0.0
I have been using live_react in production for different project.

Breaking Changes:

• vitejs: switch from Mix Esbuild to Vite.js

Features:

• add tests based on the one from live_vue
• add SSR support
• support inner_block slot
• context provider for live_react
• add typescript support

[Temples-Dev]

Hello, I am new to the Elixir community, i think you have a great project. I went through the live example in the github project,i was hoping to find JSX related syntax in the example but i did not. i don’t know if its in there somewhere. which kept me wondering how does live_react workings like react itself. I will appreciate clarification. Also i want to suggest that it will be nice to have the configuration scaffold with a command to get everything setup instead on following the installation guide with a lot of configs. it makes its quiet easy to setup for use. thank you.

[MRdotB]

Hi! Welcome to the Elixir community, and thanks for your interest!

LiveReact isn’t a full React framework like inertia-phoenix —it lets you render React components inside LiveView / DeadView, not replace it. You can check out the demo to see it in action.

For internals, the source code is short and worth reading.

Regarding scaffolding

There’s already a Mix task to help with setup—see the [installation guide]

[MRdotB]

I released v2.0.0.

Almost everything in this release is a port of work that already existed in
live_vue - props diffing, stream support and
the encoder protocol. Claude did the bulk of the porting.
Big thanks to @Valian

Breaking Changes:

• data-props is now encoded through the new LiveReact.Encoder protocol instead of
  Jason.Encoder. Structs passed as props need @derive LiveReact.Encoder (or an
  explicit implementation); plain maps are unaffected. See
  Upgrading to 2.0.

Features:

• Props are diffed and sent incrementally over data-props-diff instead of the full
  props being re-sent on every update. On by default
  (config :live_react, enable_props_diff: true), opt out globally with false or per
  component with diff={false}.
• Phoenix.LiveView.stream/4 assigns are supported: a stream passed as a prop is diffed
  and delivered over data-streams-diff, arriving on the client as an array whose items
  carry their __dom_id.
• LiveReact.Encoder ships implementations for the structs you are most likely to pass
  as props: Phoenix.HTML.Form (including Ecto changeset values and errors),
  Phoenix.LiveView.AsyncResult, Phoenix.LiveView.UploadConfig,
  Phoenix.LiveView.UploadEntry, and Date, Time, NaiveDateTime and DateTime.

New guide: Props Diffing and Streams.

New examples site:

The demo app moved out of the library into its own repository and now lives at
https://live-react.mrdotb.com. Every example has Preview / LiveView / React tabs,
so you can read the server side and the client side of the same page side by side.

The 2.0 features have examples of their own:

• props-diffing — only the changed
  prop path travels over the wire, unless a component opts out
• streams — insert, replace, edit, delete
• encoder — what @derive LiveReact.Encoder
  sends to the client, and what it keeps on the server
• async — assign_async’s AsyncResult
  reaching React as loading, ok and failed