ViewComponent Cheatsheet

• Generators

  • New

    rails generate component Example title content

  • Namespacing

    rails generate component Sections::Example title

  • Inline (without an template)

    rails generate component Example title --inline

• Rendering

  • Multi-line block

    <%= render ExampleComponent.new do %>
Content here
<% end %>

  • Single-line block

    <%= render ExampleComponent.new { "Content here" } %>

  • with_content()

    <%= render ExampleComponent.new.with_content("Content here") %>

  • spacer_component

    <%= render(ExampleComponent.with_collection(@products, spacer_component: ExampleSpacerComponent.new)) %>

  • Conditional rendering

    def render? = true || false

• Slots

  • renders_one

    renders_one :heading

    Usage

    <%= render ExampleComponent.new do |component| %>
  <% component.with_heading { "Heading" } %>
<% end %>

  • Default slot name

    renders_one :heading

    Usage

    def default_header
  "Hello, World!"
end

  • renders_many

    renders_many :articles

    Usage

    <%= render ExampleComponent.new do |component| %>
  <% component.with_article do %>
    Article content here
  <% end %>
<% end %>

  • Predicate method (for renders_one)

    header?

    Predicate method (for renders_many)

    articles?

• Helpers

  • View Helpers

    helpers.icon "home"

  • Use delegation

    delegate :icon, to: :helpers

    Then use as follows

    icon "home"