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. It will extract strings from TS and TSX files and put it in template.json. JSON files are synced with Localazy service by GitLab CI pipelines. Current user locale is stored in auth storage.