Internationalization (I18n) support

Instrumental Components is designed and set up to be internationalized (I18n) out of the box so that you can easily serve your application in multiple languages.

It's built using the core Rails I18n API, so you can use all of the same tools and techniques you're used to.

Localization

All of the user-facing texts throughout all components by Instrumental Components are set up using the t helper, along with the default option displaying the text in English for easy reference.

The component name is the top-level key used to store all translation texts in files that were installed via that component.

The simplest example is the root page component, which displays "Hello world" as the page title.

Copy
<div>
  <h1>
    <%= t('root_page.title', default: 'Hello world!') %>
  </h1>
</div>

Default locale configuration

When Instrumental Components is initially installed, it will add these lines to your config/application.rb file:

Copy
# Set default locale
  config.i18n.default_locale = :en

# Load locale files
  config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '*.{rb,yml}')]

This sets the default locale to English.

Adding translations

To add translations for a new language, you can create a new locale file in the config/locales directory.

For example, to add translations for Spanish, you can create a new file called es.yml in the config/locales directory.

Copy and paste all of the content from the en.yml file into the new file, and change the first key to the new language code:

Copy
es:
  root_page:
    title: "Hola mundo"
    ...

Cursor, Windsurf, Claude, or chatGPT can make it fast and easy to translate all of the text in your locale files from English to your new language.

Instrumental Components

I created Instrumental Components to make designing and building professional apps with Ruby on Rails easy, fast, and fun. I use it on all of my projects and I hope it helps you build something great.

Brian Casel
Brian Casel
Creator of Instrumental Components
Learn more Send me a question or request