asnyder002
Do Surface components need to be injected into Surface Live View?
I am taking a look at Surface UI to build out components. From my understanding you can build out Surface.Component modules and then using a Surface.LiveView wrapper inject the components into the render function. Is there a way to create a component and then use it in a traditional template somehow?
For example if I have an index page already created and built out a search/filter component, is there a way for me to render <SearchBar/> ?
Marked As Solved
msaraiva
Hi @asnyder002!
A Surface component is also a LiveComponent so, most of the time, you can use live_component/3 just like you would do for any other component:
<%= live_component @socket, SearchBar, id: "search_bar", ... %>
The exceptions are:
- You need to retrieve context assigns inside your component
- You’re using named slots in your component
Phoenix LV has no built-in support for contexts nor named slots, so if you need them, you’ll have to move your code to render/2 and use ~H or wait a bit until Support loading external templates and css files · Issue #22 · surface-ui/surface · GitHub is done and convert your eex template into a .sface file.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Develop your skills with books, videos, and courses.
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, logs, uptime, and Just Enough APM. Built for developers.
Develop your skills with books, videos, and courses.
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!"