Skip to content

Localization

Jump to bottom
Philip London edited this page Mar 16, 2020 · 2 revisions

Introduction

  • The project is using the popular react-intl package for localization
  • Take a look at this address to get more details

Translations

Two components can be used for translations:

  • FormattedMessage

    • id:
      • Mandatory
      • Must be unique
      • Conventions: the.path.to.this.component.myrelevantkey
    • defaultMessage
      • Mandatory
      • Must be the english value (for fallback)
      • Conventions
        • Should stay on 1 line in the code
        • Should never be longer than 1 sentence
        • Can contain dynamic values encapsulated in brackets: {dynamicValue}
        • If the value contains a single quote, you can use double quote to define your defaultMessage
    • values:
      • Optional
      • Allows us to inject a text/number variable in the translation
      • Conventions: {{firstName:'Guillaume', lastName: 'Marquilly'}}
    • description
      • Optional
      • Can contain some details about this translation that we could transfer to the translation agency

  • FormattedHtmlMessage

    • USE WITH CAUTION
    • it is using internally React setDangerousHtml and we should not render any html with potential malicious injections
    • if you need to style the translations you can use <FormattedHTMLMessage>

Changing Strings

If you are changing the defaultMessage you will also need to change the id so that the package react-intl-translations-manager can correctly detect the change and update our locales files accordingly.

Examples

Example 1: short translation

<FormattedMessage id='scenes.landing.main.transactions' defaultMessage='Transactions' />

Example 2: styled translation

<div className='text-uppercase'>
    <FormattedMessage id='scenes.landing.main.transactions' defaultMessage='Transactions' />
</div>

Example 3: translation containing a single quote

<FormattedMessage id='scenes.faq.needmorehelp' defaultMessage="Can't find what you're looking for?" />

Example 4: long translation

<FormattedMessage id='scenes.faq.item4.answer' defaultMessage='To receive bitcoin, the sender needs your bitcoin address.' />
<FormattedMessage id='scenes.faq.item4.answer2' defaultMessage='Our wallet will automatically generate a new address for each transaction.' />
<FormattedMessage id='scenes.faq.item4.answer3' defaultMessage='Click on Receive and copy the address to share with the sender.' />
<FormattedMessage id='scenes.faq.item4.answer4' defaultMessage='To send bitcoin, click Send, enter the recipient’s bitcoin address in the ‘To’ field and how much you want to send.' />

Example 5: translation with dynamic value

<FormattedMessage id='scenes.landing.main.walletsamount' defaultMessage='{nbWallets} Million+' values={{nbWallets: 14}} />

Example 6: translation with inner html (only span, or a tags allowed)

<FormattedHTMLMessage id='scenes.home' defaultMessage='Welcome <span>Back!</span> Click <a>here</a> to leave.' />
Clone this wiki locally