ViewComponent Cheatsheet
Looking for a poster version to add to your studio- or office wall. Here is a PDF!
-
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") %>
-
Conditional rendering
def render? = true || false
-
-
Slots
-
renders_one
renders_one :heading
Usage
<%= render ExampleComponent.new do |component| %>
<% component.with_heading { "Heading" } %>
<% 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"
-
UI components for Ruby on Rails apps
$
129
one-time
payment
-
One-time Payment
-
Access to the Entire Library
-
Built using ViewComponent
-
Designed with Tailwind CSS
-
Enhanced with Hotwire