Skip to content

Multilingual user interface

Workflow looks as following:

Markup TSX code using translate function. For example: translate('User details')

Always mark complete sentences for translation. If you combine fragments at runtime, there is no way for the translator to construct a proper sentence in their language. Do not combine strings together at runtime.

If you need to render JSX element inside of translated string, you should use formatJsxTemplate function:

1
2
3
4
translate('Opened by {user} at {date}', {
  user: <IssueUser item={item} />,
  date: formatDate(item.created),
}, formatJsxTemplate)

If translated string should be rendered inside of JSX element, you should use formatJsx function:

1
2
3
4
5
translate(
  'You have not added any SSH keys to your <Link>profile</Link>.',
  { Link: (s) => <Link state="profile.keys">{s}</Link> },
  formatJsx,
)

Translation template is created automatically via Webpack. It will extract strings from TS and TSX files and put it in locales/template.pot.

PO files are synced with Localazy service by GitLab CI pipelines.

All PO files are automatically converted by Webpack to JSON files.

Current user locale is stored in auth storage.