Using components

You can use view components in Rails templates by:

passing a ViewComponent object to Rails’ render method directly
using the packaged helpers that build and render the ViewComponent

The result and functionality of the components is the same regardless of approach.

Capturing content

This library uses Rails’ default capture functionalty. It’s intended to work with strings but renders nothing when other kinds of objects are provided. For example, if we capture a floating point number and a string in a tag#span block, only the string is rendered.

= tag.span { 1.0 }
= tag.span { "2.0" }

<span></span>
<span>2.0</span>

Using component objects directly

Rails supports the rendering of ViewComponent objects natively. You can pass them straight to render in your template.

= render(GovukComponent::InsetTextComponent.new(text: "Important message"))

Using the provided helper methods

The helper methods make rendering components easier and they provide a more consistent experience when using with the link helpers and GOV.UK Form Builder.

= govuk_inset_text(text: "Important message")

Component to helper mappings
Component class name	Helper method
`GovukComponent::AccordionComponent`	`govuk_accordion`
`GovukComponent::BackLinkComponent`	`govuk_back_link`
`GovukComponent::BreadcrumbsComponent`	`govuk_breadcrumbs`
`GovukComponent::CookieBannerComponent`	`govuk_cookie_banner`
`GovukComponent::DetailsComponent`	`govuk_details`
`GovukComponent::FooterComponent`	`govuk_footer`
`GovukComponent::HeaderComponent`	`govuk_header`
`GovukComponent::InsetTextComponent`	`govuk_inset_text`
`GovukComponent::NotificationBannerComponent`	`govuk_notification_banner`
`GovukComponent::PaginationComponent`	`govuk_pagination`
`GovukComponent::PanelComponent`	`govuk_panel`
`GovukComponent::PhaseBannerComponent`	`govuk_phase_banner`
`GovukComponent::StartButtonComponent`	`govuk_start_button`
`GovukComponent::SummaryListComponent`	`govuk_summary_list`
`GovukComponent::TableComponent`	`govuk_table`
`GovukComponent::TabComponent`	`govuk_tabs`
`GovukComponent::TagComponent`	`govuk_tag`
`GovukComponent::WarningTextComponent`	`govuk_warning_text`