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

LiveVue - seamless integration of Vue with Phoenix LiveView

Mandarin + Forage - An admin tool for phoenix

Ecto_sqlite3 - an Ecto3 SQLite3 adapter

Doggo - A collection of unstyled Phoenix components

Makeup - A syntax highlighter for Elixir

EctoJob - a transactional job queue built with Ecto, PostgreSQL and GenStage

Flop - Filtering, sorting and pagination for Ecto

Surface - A component-based library for Phoenix LiveView

PidFile - create and manage a PID file from the BEAM process

ChromicPDF - PDF generator

Other popular topics

** (RuntimeError) could not lookup Ecto repo Repo because it was not started or it does not exist

Elixir apps as systemd services - info & wiki

Emacs - Elixir Setup Configuration Wiki

What is the best IDE for elixir?

Drab: remote controlled frontend framework for Phoenix

(EXIT) no process: the process is not alive or there's no process currently associated with the given name, possibly because its application isn't started

Write while loop equivalent in elixir

DateTime Format to string?

Elixir vs Python

How can I write a raw sql query?

Libraries & Projects>Libraries

Latest on Elixir Forum

Sponsor Spotlight

Our Sponsors

Categories:

Sub Categories:

Forums

Our Sponsors

We're in Beta