-
Notifications
You must be signed in to change notification settings - Fork 15
React intl translation examples
Gabriel Ramos Takeda edited this page May 25, 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 (stateless component)
import { injectIntl } from 'react-intl'
const ComponenteRaiz => ({ intl }) => (
<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)
After (component w/ state)
import React, { Component } from 'react'
import { injectIntl } from 'react-intl'
class ComponenteRaiz extends Component {
render() {
const { intl } = this.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',
...
}
Before
import { connect } from 'react-redux'
import { injectIntl } from 'react-intl'
import Page from './page'
const fields = ['first_name']
const validate = (values, { intl }) => {
const errors = {}
if (!values.first_name) {
errors.first_name = 'Informe seu nome'
}
return errors
}
export default injectIntl(connect()(
reduxForm({ form: 'exampleForm', fields, validate })(Page)
))
After
import { connect } from 'react-redux'
import { injectIntl } from 'react-intl'
import Page from './page'
const fields = ['first_name']
const validate = (values, { intl }) => {
const errors = {}
if (!values.first_name) {
errors.first_name = intl.formatMessage({
id: 'page--example.form.name.validation.required',
defaultMessage: 'Informe seu nome'
})
}
return errors
}
export default injectIntl(connect()(
reduxForm({ form: 'exampleForm', fields, validate })(Page)
))
In the pt-BR locale file
export default {
...
'page--example.form.name.validation.required': 'Informe seu nome',
...
}