React intl translation examples

Follow some examples that describes how to create an entry point to translate a text.

Translate simple text

Before

<h2>Escolha uma das suas comunidades</h2>

After

import { FormattedMessage } from 'react-intl'

<h2>
  <FormattedMessage
    id='page--community-list.subheader'
    defaultMessage='Escolha uma das suas comunidades'
  />
</h2>

In the pt-BR locale file

export default {
  ...
  'page--community-list.subheader': 'Escolha uma das suas comunidades',
  ...
}

Translate text with variable

Before

<h1>Olá {user.first_name},</h1>

After

import { FormattedMessage } from 'react-intl'

<h1>
  <FormattedMessage
    id='page--community-list.header'
    defaultMessage='Olá {name},'
    values={{ name: user.first_name }}
  />
</h1>

In the pt-BR locale file

export default {
  ...
  'page--community-list.header': 'Olá {name},',
  ...
}

Translate text that contains React component

Before

<p className='white center'>
  ou <Link to={paths.communityAdd()}>Crie uma nova comunidade</Link>
</p>

After

import { FormattedMessage } from 'react-intl'

<p className='white center'>
  <FormattedMessage
    id='page--community-list.community-add.text'
    defaultMessage='ou {link}'
    values={{
      link: (
        <Link to={paths.communityAdd()}>
          <FormattedMessage
            id='page--community-list.community-add.link'
            defaultMessage='Crie uma nova comunidade'
          />
        </Link>
      )
    }}
  />
</p>

In the pt-BR locale file

export default {
  ...
  'page--community-list.community-add.text': 'ou {link}',
  'page--community-list.community-add.link': 'Crie uma nova comunidade',
  ...
}

Translate text that contains HTML

Before

<p>
  Tem certeza que deseja remover o
  subdomínio <b>{this.state.deletedDNSRecord.value}</b>?
</p>

After

import { FormattedMessage } from 'react-intl'

<p>
  <FormattedMessage
    id='page--community-settings.domain'
    defaultMessage='Tem certeza que deseja remover o subdomínio {domain}?'
    values={{
      domain: <b>{this.state.deletedDNSRecord.value}</b>
    }}
  />
</p>

In the pt-BR locale file

export default {
  ...
  'page--community-settings.domain': 'Tem certeza que deseja remover o subdomínio {domain}?',
  ...
}

Translate html tag attribute

(or in cases that needs to returns a pure text instead of a component)

Before

<input
  type='text'
  name='first_name'
  placeholder='Insira aqui seu nome'
/>

After

import { injectIntl } from 'react-intl'

const ComponenteRaiz => (props) => (
  <input
    type='text'
    name='first_name'
    placeholder={
      intl.formatMessage({
        id: 'components--componente-raiz.input.first-name',
        defaultMessage='Insira aqui seu nome'
      })
    }
  />
)

export default injectIntl(ComponenteRaiz)

In the pt-BR locale file

export default {
  ...
  'components--componente-raiz.input.first-name': 'Insira aqui seu nome',
  ...
}