View Helpers

Rails Designer includes various view helpers to clean up your code. Rails helpers are modules that offer methods for generating HTML and other utility functions, ideal for removing repetitive global code in your app.

Set up

You can enable each individually helper method. In config/initializers/rails_designer.rb, look for config.view_helpers.

# …
config.view_helpers = ["component", "stream_notification"]
# …

You can remove any to disable the helper in your app.

Available helpers

These are the current available helpers in Rails Designer:

• component
• stream_notification

Component

Rendering a ViewComponent is pretty cumbersome:

render(AvatarComponent.new(user: Current.user))

Instead you can use the component-helper like this:

component "avatar", user: Current.user

Stream Notification

Displaying flash messages (notifications) is quite common, even more so with Rails Designer’s Notifications. It’s quite annoying to write the same lines of code every time you want to display a notification through a Turbo Stream:

# app/views/users/create.turbo_stream.erb
<⁠%= turbo_stream.replace "flash" do %>
  <⁠%= render NotificationComponent.new(message: "User Saved") %>
<⁠% end %>

Use the stream_notification instead:

# app/views/users/create.turbo_stream.erb
<⁠%= stream_notification "User Saved" %>

The first attribute is the message to be displayed. Other options are:

• type (notice, success, alert, warning);
• stacked (true or false);
• description;
• time_delay (in seconds);
• progress_indicator (either spinner or progress_bar);
• primary_link;
• secondary_link

With all options it might look like this:

# app/views/users/create.turbo_stream.erb
<⁠%= stream_notification "Suspicious Login Attempt",
    type: "alert",
    description: "We've prevented a login from an unrecognized source.",
    time_delay: 30,
    progress_indicator: "progress_bar",
    primary_link: {
      label: "Review Activity",
      path: "#"
    },
    secondary_link: {
      label: "It's me",
      path: "#"
    }
%>

Helper generator

If you want to make tweaks to any of these helpers, run the following generator:

bin/rails generate rails_designer:helper helper_name

You can also run bin/rails generate rails_designer:helper --help to view help.