fteschke
Phoenix LiveView + HeadlessUI
I wrote a short description of how to use HeadlessUI components with LiveView:
Tailored to HeadlessUI, but in fact not HeadlesUI specific, but applicable to React components in general.
Approach:
- React Component
- Wrapped in Web Component that handles server->client (attribute changes) and client-server (events) communication
- Rendered to light DOM (not shadow DOM, due to lacking HeadlessUI support)
- micro LiveView Hook with glue code push LiveView events to server
Pros:
- integrates well with minimal esbuild assets pipeline
- web component is a good interface boundary for LiveView / “custom” Javascript
- sprinkle minimal amounts of Javascript where necessary
Cons:
- use with caution, prefer LiveView
Phoenix.LiveView.JSbindings where sufficient
Do you use similar techniques? What are your experiences?
Are there better ways of implementing this approach?
First Post!
LostKobrakai
While I really like the idea and effort put into those components, I’ll never understand why I’d use them, when they cannot replace native inputs. It’s nice to have a fancy combobox (especially for multi select), but not if it means all my phx-change / phx-submit form bindings break, because the input doesn’t integrate with a form.
Most Liked
LostKobrakai
There had been an interesting talk at last years elixir conf: https://www.youtube.com/watch?v=xXWyOy9XdA8
I don’t think they’re just useful for input fields, but more anything interactive. They’re useful wherever you want to abstract some behaviour without enforcing how the UI around said behaviours looks like.
Last Post!
fteschke
Nope.
Great talk, wasn’t aware of that. I would look at my post as a port of Chris’s ideas to react/JSX world, where he focuses more on lit.
I especially like his call for simplicity by avoiding JS rendering, shadow DOM etc. if not needed.
Popular in Discussions
Other popular topics
Latest Phoenix Threads
Chat & Discussions>Discussions
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
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.
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!"