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:
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.
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.
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
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.
Last Post!
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]
Popular in Announcing
Other popular topics
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
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
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #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 for Elixir devs who love to ship. Start your free account.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
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!"