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.
Where Next?
Trending in Announcing
Other Trending Topics
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #phoenix_html
- #iex
- #ai
- #graphql
- #genstage
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 7- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
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.
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?
MRdotB
live_react has been picking up interest, as seen in projects like PhoenixAnalytics. Inspired by the Server-Side Rendering (SSR) features in
live_svelteandlive_vue, I’ve implemented it forlive_react.I released a
0.2.0-betaand will release0.2.0when 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:
Features:
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.
There’s already a Mix task to help with setup—see the [installation guide]