MRdotB

Live_react - React inside Phoenix LiveView

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:

Here is a small demo on Fly: demo.

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

7 comments

#javascript #react #liveview #live-view

42 3549 7

2025-03-13 20:41:49 UTC

Most Liked

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

Post #5

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

Post #6

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.

Post #2

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

github.com

Valian/live_vue/blob/main/assets/js/live_vue/hooks.js

import { createApp, createSSRApp, reactive, h } from 'vue'
import { liveInjectKey } from "./use"
import { normalizeComponents, getComponent } from './components';


function mapValues(object, cb) {
    return Object.entries(object).reduce((acc, [key, value]) => {
        acc[key] = cb(value, key, object);
        return acc;
    }, {});
}

function getAttributeJson(el, attributeName) {
    const data = el.getAttribute(attributeName)
    return data ? JSON.parse(data) : {}
}

function getSlots(el) {
    const dataSlots = getAttributeJson(el, "data-slots")
    return mapValues(

This file has been truncated. show original

github.com

woutdp/live_svelte/blob/master/assets/js/live_svelte/hooks.js

import {normalizeComponents} from "./utils"

function getAttributeJson(ref, attributeName) {
    const data = ref.el.getAttribute(attributeName)
    return data ? JSON.parse(data) : {}
}

function detach(node) {
    node.parentNode?.removeChild(node)
}

function insert(target, node, anchor) {
    target.insertBefore(node, anchor || null)
}

function noop() {}

function getSlots(ref) {
    const slots = {}

This file has been truncated. show original

github.com

mrdotb/live_react/blob/main/assets/js/live_react/hooks.js

import React from "react";
import ReactDOM from "react-dom/client";

function getAttributeJson(el, attributeName) {
  const data = el.getAttribute(attributeName);
  return data ? JSON.parse(data) : {};
}

function getProps(hook) {
  return {
    ...getAttributeJson(hook.el, "data-props"),
    // pass the hook callbacks to the component
    pushEvent: hook.pushEvent.bind(hook),
    pushEventTo: hook.pushEventTo.bind(hook),
    handleEvent: hook.handleEvent.bind(hook),
    upload: hook.upload.bind(hook),
    uploadTo: hook.uploadTo.bind(hook),
  };
}

This file has been truncated. show original

Post #3

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?

Post #4

Where Next?

View thread on forum (has 7 responses!)

javascript

react

liveview

live-view

Home Libraries & Projects>Libraries

#javascript #react #liveview #live-view

42 3550 7

Last post

Live_react - React inside Phoenix LiveView

MRdotB

Live_react - React inside Phoenix LiveView

Most Liked

MRdotB

MRdotB

Breaking Changes:

Features:

johnknott

MRdotB

orion

Where Next?

Popular in Libraries

Jason: a blazing fast JSON parser and generator in pure Elixir

CVA - easily construct component variants

Snap - an Elasticsearch client for Elixir

ElixirScript - converts Elixir to JavaScript

ReactRender: Server Side Rendering for React Components

Bandit - a pure Elixir HTTP server for Plug & WebSock applications

Random - based on :rand (not :random)

Samly - Add SAML SSO to your Phoenix application (now with multiple identity provider support)

Elixir Media Libs

ChromicPDF - PDF generator

Other popular topics

Elixir apps as systemd services - info & wiki

Why would I choose Elixir as a general purpose programming language?

How are you dealing with CSV files that uses CR line breaks?

Checking if an enum is empty - Credo vs Compiler

Defining Ecto Schemas (PostGres) to use NOT NULL in column definitions

How to check Elixir version

Typespecs - best way to spec keyword lists?

How do I kill a process ` #PID<0.186.0` in iex?

Updating structs: Map.put vs %Foo{oldfoo | new: value} vs put_in

How To Implement if...else if...else condition

Libraries & Projects>Libraries

Latest on Elixir Forum

Sponsor Spotlight

Our Sponsors

Categories:

Sub Categories:

Forums

Our Sponsors

We're in Beta