Spacer Components introduced in ViewComponent 3.20

Version 3.20 of ViewComponent introduced spacer_component.

It’s a new attribute that can be added to a collection to add another component between each item of a collection. It works like this:

<%= render(ProductComponent.with_collection(@products, spacer_component: SpacerComponent.new)) %>

This will then render SpacerComponent’s between each ProductComponent. Pretty cool.

If you think, you’ve seen this feature before. You could be right. It was inspired by Rails’ collection partial rendering.

Get UI & Product Engineering Insights for Rails Apps (and product updates!)

Published at . Have suggestions or improvements on this content? Do reach out.

UI components for Ruby on Rails apps

$ 129 one-time
payment

Get Access

  • One-time Payment

  • Access to the Entire Library

  • Built for Ruby on Rails (inc. Rails 8)

  • Designed with Tailwind CSS and Enhanced with Hotwire

  • Updates for 12 months