Do Surface components need to be injected into Surface Live View?

Phoenix Forum Questions / Help
, ,
1

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/> ?

2

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:

  1. You need to retrieve context assigns inside your component
  2. 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 https://github.com/msaraiva/surface/issues/22 is done and convert your eex template into a .sface file.

4 Likes