LiveReact

React inside Phoenix LiveView.

Features

• ⚡ End-To-End Reactivity with LiveView
• 🪶 Incremental Prop Updates — only what changed is sent over the wire
• 🌊 Phoenix Streams as props
• 📝 Form & Upload Encoding — changeset errors and upload state, ready for React
• 🔋 Server-Side Rendered (SSR) React
• 🦄 Tailwind Support
• 💀 Dead View Support
• 🐌 Lazy-loading React Components
• 🦥 Slot Interoperability
• 🔗 Link Component for LiveView Navigation
• 🚀 Amazing DX with Vite

Resources

• Demo (source)
• HexDocs
• HexPackage
• Phoenix LiveView
• Installation
• Props Diffing and Streams
• Deployment
• Development
• SSR
• Upgrading to 2.0

Example

Visit the demo website to see examples of what you can do with LiveReact. Its source lives in mrdotb/live_react_examples.

You can also check out the PhoenixAnalytics project for a real-world example.

Why LiveReact

Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML. It works by communicating any state changes through a websocket and updating the DOM in realtime. You can get a really good user experience without ever needing to write any client side code.

LiveReact builds on top of Phoenix LiveView to allow for easy client side state management while still allowing for communication over the websocket.

Installation

see Installation

Roadmap 🎯

• [ ] useLiveForm - a utility to effortlessly use Ecto changesets & server-side validation, similar to HEEx

The server side of this already exists: a Phoenix.HTML.Form passed as a prop is encoded with its values, its changeset errors keyed by field, and its validity — see Props Diffing and Streams. What is missing is the React-side hook that binds those to inputs.

Credits

I was inspired by the following libraries:

• LiveVue
• LiveSvelte

I had a need for a similar library for React and so I created LiveReact 👍