https://github.com/mrdotb/live_react

✨ React inside Phoenix LiveView with seamless end-to-end reactivity
https://github.com/mrdotb/live_react

liveview react

Last synced: 19 days ago
JSON representation

✨ React inside Phoenix LiveView with seamless end-to-end reactivity

• Host: GitHub
• URL: https://github.com/mrdotb/live_react
• Owner: mrdotb
• License: mit
• Created: 2024-06-24T16:30:34.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2025-05-04T19:38:25.000Z (30 days ago)
• Last Synced: 2025-05-09T19:12:35.799Z (25 days ago)
• Topics: liveview, react
• Language: Elixir
• Homepage: https://live-react-examples.fly.dev/simple
• Size: 292 KB
• Stars: 174
• Watchers: 6
• Forks: 16
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
[![Github CI](https://github.com/mrdotb/live_react/workflows/Tests/badge.svg)](https://github.com/mrdotb/live_react/actions)

[![Hex.pm](https://img.shields.io/hexpm/v/live_react.svg)](https://hex.pm/packages/live_react)

[![Hexdocs.pm](https://img.shields.io/badge/docs-hexdocs.pm-purple)](https://hexdocs.pm/live_react)

[![GitHub](https://img.shields.io/github/stars/mrdotb/live_react?style=social)](https://github.com/mrdotb/live_react)

# LiveReact

React inside Phoenix LiveView.

![logo](https://github.com/mrdotb/live_react/blob/main/logo.svg?raw=true)

## Features

- ⚡ **End-To-End Reactivity** with LiveView

- 🔋 **Server-Side Rendered** (SSR) React

- 🦄 **Tailwind** Support

- 💀 **Dead View** Support

- 🐌 **Lazy-loading** React Components

- 🦥 **Slot** Interoperability

- 🚀 **Amazing DX** with Vite

## Resources

- [Demo](https://live-react-examples.fly.dev/simple)

- [HexDocs](https://hexdocs.pm/live_react)

- [HexPackage](https://hex.pm/packages/live_react)

- [Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view)

- [Installation](/guides/installation.md)

- [Deployment](/guides/deployment.md)

- [Development](/guides/development.md)

- [SSR](/guides/ssr.md)

## Example

Visit the [demo website](https://live-react-examples.fly.dev/simple) to see examples of what you can do with LiveReact.

You can also check out the [PhoenixAnalytics project](https://github.com/lalabuy948/PhoenixAnalytics) 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](/guides/installation.md)

## Roadmap 🎯

- [ ] `useLiveForm` - an utility to efforlessly use Ecto changesets & server-side validation, similar to HEEX

- [ ] Add support for Phoenix streams as props

## Credits

I was inspired by the following libraries:

- [LiveVue](https://github.com/Valian/live_vue)

- [LiveSvelte](https://github.com/woutdp/live_svelte)

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