ViewComponent is an awesome tool for building reusable, testable, and encapsulated view components in Ruby on Rails apps. Combined with Rails Designer, it provides an efficient way to create and manage UI components, enhancing the development process and maintainability of your Rails projects.
Why Rails Designer Uses ViewComponent?
ViewComponent has all kinds of upsides compared to Rails’ solution (partials/helpers):
- Modularity: Create self-contained, reusable components that encapsulate their own logic;
- Improved Performance: ViewComponents are compiled ahead of time;
- Easier Testing: Components can be unit tested in isolation;
Getting Started
To begin using ViewComponent with Rails Designer, follow these steps:
Add ViewComponent to your Rails application’s Gemfile:
gem "view_component"
Then run the one command to install Rails designer: rails app:template LOCATION="https://railsdesigner.com/setup/". Check out the quickstart guide for all the details.
Adding Components with Rails Designer
With Rails Designer and ViewComponent, adding new components to your app is easy:
- Find one of the many components from the library;
- Run the command to add the component to your app, eg.
bin/rails generate rails_designer:component Elements::Badge; - Copy of one the variants from the library
From here you can tweak the variant or the component however you want.
Want to learn more about ViewComponent? Learn How to Write Better ViewComponent Code.