internationalizing react apps

Internationalizing React AppsGeorge Bukhanov

github.com/northerneyes

@notherneyes

Localization was always difficult

Even in different ecosystems● Windows forms applications,

● Asp.net sites,

● iOS development,

● Android

● etc

React has no any special instruments

Redux can help

We can create a special intl reducer

intl reducer, an exampleimport messages from './messages';import {Record} from 'immutable';

const InitialState = Record({ availableLanguages: ['en'], messages, selectedLanguage: 'en'});

const initialState = new InitialState;

const revive = state => initialState .mergeDeep(state) .update('messages', messages => messages.toJS());

export default function intlReducer(state = initialState) { if (!(state instanceof InitialState)) return revive(state);

return state;}

Benefits ● Server rendering

● Changing locale without reloading the page

● Consistency

But it leads to many problems

We should pass msg object everywhereconst mapStateToProps = state => { return { msg: state.intl.messages[state.intl.selectedLanguage] };};

@connect(mapStateToProps)export default class JobsPage extends React.Component {

static propTypes = { msg: React.PropTypes.object.isRequired };

render() { const {msg} = this.props;

...

Or make all components smart

And more, we get big json file with all messages… export default { alerts: { title: 'Alerts', confirmDelete: "Are you sure you want to delete this Email alert?" },

alertCreateModal: { title: 'New Email Alert', notificationFrequency: 'How often do you want to receive emails?', save: 'Save Email Alert', cancel: 'Cancel', timeIntervals: { immediately: 'immediately', daily: 'daily', weekly: 'weekly', never: 'never' } },...

Disadvantages● It’s hard to work with it● It’s hard to support it● It’s hard to translate it● Performace issue (smart components)● Or hanging prop (msg)● Formatting numbers, dates, and string messages?

Disadvantages● It’s hard to work with it● It’s hard to support it● It’s hard to translate it● Performace issue (smart components)● Or hanging prop (msg)● Formatting numbers, dates, and string messages?

React context?

React Intl story beginsReact Intl is part of FormatJS. It provides bindings to React via its components and API.

Really easy to useimport React from 'react';

import {IntlProvider} from 'react-intl';

ReactDOM.render(

<IntlProvider locale="en">

<App />

</IntlProvider>,

document.getElementById('container')

);

We are ready to gorender() { const {name, unreadCount} = this.state; return ( <p> <FormattedMessage id="welcome" defaultMessage={`Hello {name}, you have {unreadCount, number} {unreadCount, plural, one {message} other {messages} }`} values={{name: <b>{name}</b>, unreadCount}} /> </p> );}

Provides different formatters<FormattedDate

value={Date.now()}

day="numeric"

month="long"

year="numeric"

/>

<FormattedNumber

value={price.value}

style="currency"

currency="EUR"

/>

February 21, 2017

€1,000.00

Provides different formatters<FormattedMessage id='app.greeting' description='Greeting to welcome the user to the app' defaultMessage='Hello, {name}!' values={{ name: 'Eric' }}/>

<FormattedRelative

value={Date.now()}

/>

…60 seconds later:<span>1 minute ago</span>

<span>Hello, Eric!</span>

Demo

Thank you!Link to demo:

github.com/northerneyes/react-intl-example

@notherneyes