09. Internationalization (i18n)

AdminBro has the default set of texts prepared in english language. But nothing stands in a way for you to change each of them or even translate AdminBro to a different language.

Locale option and basic translations

All the translations can be overridden by using AdminBroOptions#locale property.

So in order to define how a new action is named, simply override it's translation:

const options = {
  locale: {
    translations: {
      actions: {
        new: 'Let\'s create',
      }
    }
  }
}

const adminBro = new AdminBro(options)
...

but also you can override the name of a new action only for a specific resource:

const options = {
  locale: {
    translations: {
      actions: {
        new: 'New',
      },
      resources: {
        Article: {
          actions: {
            new: 'New Article'
          }
        }
      }
    }
  }
}

Namespaces

All the translation keys are divided into following groups:

• actions - translations for all actions - both default actions, and those created by you.
• buttons - translations for all kind of buttons.
• messages - translations for all messages in the app
• labels - translations for all labels - usually one words. Labels are used to translate resource names.
• properties - translations for all properties.

All of them can be specified globally, or for a specific resource.

More detailed example

Let's assume that you want to translate your admin panel to polish.

This is how it could look like:

Take a closer look at this example because it contains a different edge cases like translating "add new item" button for particular property, or translating labels for your database enums.

const options = {
  locale: {
    language: 'pl',
    translations: {
      actions: {
        new: 'Stwórz nowy',
        edit: 'Edytuj',
        show: 'Detale',
        ...,
      },
      buttons: {
        save: 'zapisz',
        // We use i18next with its pluralization logic.
        confirmRemovalMany_1: 'Potwierdź usunięcie {{count}} rekordu',
        confirmRemovalMany_2: 'Potwierdź usunięcie {{count}} rekordów',
        ...
      },
      properties: {
        // labels of properties in all resources with name "name"
        // will be translated to "Nazwa".
        name: 'Nazwa',
        nested: 'Zagniezdzone',
        // this is how nested properties (for nested schemas) can be provided
        'nested.width': 'Szerokość',
        // translate values of boolean property
        'isAdmin.true': 'admin',
        'isAdmin.false': 'normalny'
        // translate values of enums:
        'companySize.small': 'mała',
        'companySize.medium': 'średnia',
        'companySize.big': 'duza',
        // tags is an array and we translate button for this array:
        'tags.addNewItem': 'Dodaj nowy tag',

      },
      labels: {
        // here we translate the name of a resource.
        Comment: 'Komentarze',
      },
      resources: {
        Comment: {
          properties: {
            // this will override the name only for Comment resource.
            name: 'Tytuł'
          }
        }
      }
    }
  }
}

How to use translations in my custom actions/components

Action#before and Action#after hooks come with an Action#ActionContext param. It combines all the TranslateFunctions like translateButton, translateLabel etc.

so you can use them like this:

// before Hook
{
  after: async (response, request, context) => {
    const { translateMessage } = context
    ...
  }
}

If you want to use translations in your components - you can use useTranslation hook.

More options...

On the backend we use https://www.i18next.com/ library. So make sure to check out their docs to read more about all the possible options.

Also you can always check the default english translation file available in our repo here.