Thanks for the shout-out. As a note I really liked the hybrid react+LiveView approach and would do it again.

I don’t feel any attachment to having a pure LV system. I’d rather pick the thing that’s going to work best for what I want, especially if I don’t need to create it from scratch.

LiveView hooks give you everything you need to mount react, so check out that post to see how I did it.

You can also have a look at Kino’s DataTable implementation. They use:

1. LiveView to load the data - SmartCell
2. React + Glide Data Grid to render out - JS

Looks good I think,

image903×256 20.3 KB

image886×213 13.5 KB

This Elixir + this React lets you update the rendered data

image905×266 9.78 KB

Off the top of my head, there’s no reason it wouldn’t be possible. LiveView Hooks make all sorts of integrations possible. The question, as always, becomes whether it’s the right thing to do given your unique set of circumstances i.e. requirements, constraints, and tradeoffs.

The LiveView docs are great and especially relevant is the section on DOM Patching & temporary assigns…

A container can be marked with phx-update, allowing the DOM patch operations to avoid updating or removing portions of the LiveView, or to append or prepend the updates rather than replacing the existing contents. This is useful for client-side interop with existing libraries that do their own DOM operations.
…
The “ignore” behaviour is frequently used when you need to integrate with another JS library. Note only the element contents are ignored, its attributes can still be updated.

… as well as the section on JavaScript Interoperability.

There’s also a helpful article written by the author of Real-Time Phoenix @sb8244 React in LiveView: How and Why? that establishes some useful guidelines when working with React within LiveView.

And another potentially useful resource includes phoenix_live_react, a helper library for easily rendering React components within Phoenix LiveViews.