-
Notifications
You must be signed in to change notification settings - Fork 15
React intl translation examples
Gabriel Ramos Takeda edited this page May 16, 2017
·
5 revisions
Follow some examples that describes how to create an entry point to translate a 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',
...
}
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},',
...
}
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',
...
}
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}?',
...
}
(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',
...
}