One component, two variations

[coder2000]

I am making a filter component so I have one parent that has a renders_many for the options, however it renders them for both mobile and desktop. Is there a way to have the option component receive a parameter when rendering that tells it which variation to output?

[boardfish]

Hi again @coder2000! You might be interested in using template variants for this purpose. Those docs link to this part of the Rails docs.

If you don't prefer this pattern and would rather specify within your component which component you'd like to render for your slot, a couple of methods come to mind:

• A lambda slot that's based on the component state, if you'd rather render something different:

class OptionsComponent > ViewComponent::Base
  attr_reader :mobile

  def initialise(mobile: false)
    @mobile = mobile
  end

  renders_many :options, -> { mobile ? ExampleComponent.new : OtherComponent.new }
end

• Logic in the view file, if you'd rather not render those things at all:

<% unless mobile %>
  <% options.each do |option| %><%= option %><% end%>
<% end %>

I hope that answers your question!

[boardfish]

#954 holds the answer to your question — I'd previously found an "off-menu" use of variants, which would probably have enabled what you're after here. There's more detail within the issue.

I seem to remember you could define variants as call methods. Passing in variants as an argument may try to do this directly. For example, defining #call_phone would give the component a phone variant.

Whatever the case, clarity around variants seems to be a little lacking. I'd like to do some work in this area next year.

[boardfish]

@coder2000 Thanks for talking with me just now! IIRC you weren't choosing the status dynamically in the view we were looking at, so my recommendation for now is that you do something like this:

<%= render User::Active.with_collection(users) %>

class User::Active < ApplicationComponent
  with_collection_parameter :user
  # Whatever you were using for dry options before, equivalent to:
  def initialise(user:)
    @user = user
  end
end

Or iterate manually while using User::Active if you end up encountering something similar to #970 for dry options.

[coder2000]

Yeah, I could just use the component directly. No need for a parent one in this case I guess.

[coder2000]

I was originally thinking of it being more dynamic and rendering based on the status returned from the user model directly but wasn't able to figure that out with the slots etc.

[boardfish]

#1231 should hopefully give us a solution there. It's good to know you were thinking of doing that in the first instance — it supports the need for this pattern.