i18n for react app

Para configurar internationalization en una aplicación REACT, ursaremos la librería react-intl

1. Ejecutamos el siguiente comando en nuestra aplicación react para instalar la librería:

npm install react-intl

2. Creamos los archivos json donde estarán los labels por cada idioma. Yo los creo en la siguiente ruta:

src\i18n\locales\en.json
src\i18n\locales\es.json

	{
	"common.options": {
	"add": "Add",
	"save": "Save"
	},
	"common.label": {
	"yes": "Yes",
	"no": "No",
	"ok": "OK"
	}
	}
	{
	"common.options": {
	"add": "Agregar",
	"save": "Guardar"
	},
	"common.label": {
	"yes": "Sí",
	"no": "No",
	"ok": "OK"
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

3. Modificamos el archivo index.tsx (si estas usando typescript o index.js si estás usando javascript)
En este archivo haremos algunos imports, wrapearemos nuestra app (IntlProvider), y mandaremos como parámetros el idioma y de acuerdo a eso el archivo json que deberá leer. Sin tantas vueltas, debería quedar así:

	import * as React from 'react';
	import * as ReactDOM from 'react-dom';
	import { addLocaleData, IntlProvider } from 'react-intl';
	import * as locale_en from 'react-intl/locale-data/en';
	import * as locale_es from 'react-intl/locale-data/es';
	const en = require('./i18n/locales/en.json');
	const es = require('./i18n/locales/es.json');
	import { flattenMessages } from './utils';
	import { Provider } from 'react-redux';
	import { createStore } from 'redux';
	import App from './components/App/App';
	import { rootReducers } from './reducers';
	import './index.css';
	/**
	* Creates redux store from combining reducers
	*/
	const store = createStore(rootReducers);
	addLocaleData([...locale_en , ...locale_es]);
	const locale = navigator.language.split(/[-_]/)[0];
	const messages = {
	'en': en,
	'es': es
	};
	ReactDOM.render(
	<IntlProvider locale={locale}
	key={locale}
	messages={flattenMessages(messages[locale])}>
	<Provider store={store}>
	<App />
	</Provider>
	</IntlProvider>,
	document.getElementById('root') as HTMLElement
	);

view raw index.tsx hosted with ❤ by GitHub

4. Agregamos una función util que nos servirá para el tema de standard json notation. La función es flattenMessages:

	export function flattenMessages(nestedMessages, prefix = '') {
	return Object.keys(nestedMessages).reduce((messages, key) => {
	const value = nestedMessages[key];
	const prefixedKey = prefix ? `${prefix}.${key}` : key;
	if (typeof value === 'string') {
	messages[prefixedKey] = value;
	} else {
	Object.assign(messages, flattenMessages(value, prefixedKey));
	}
	return messages;
	}, {});
	}

view raw gistfile1.txt hosted with ❤ by GitHub

5. Utilizamos los labels traducidos:
Hacemos un impor en el componente que vayamos a utilizarlo:

<FormattedMessage id="sign.in.forgot.password" />

Como ID nos basaremos en el JSON file que hemos estructurado previamente. También tiene otros parámetros, pero para mi caso me fue suficiente utilizar *id*

	import { FormattedMessage } from 'react-intl';
	.
	.
	.
	<Grid container={true} alignItems='center'>
	<Grid item={true} xs={6}>
	<FormControlLabel
	classes={{root: this.props.classes.rememberText}}
	control={<Checkbox color='primary' />}
	label={<FormattedMessage id="sign.in.remember.me" />}
	/>
	</Grid>
	<Grid classes={{item: this.props.classes.forgotLink}} item={true} xs={6}>
	<Link to=''>
	<FormattedMessage id="sign.in.forgot.password" />
	</Link>
	</Grid>
	</Grid>

view raw gistfile1.txt hosted with ❤ by GitHub