Internationalizing react apps https://github.com/northerneyes/react-intl-example

1. Internationalizing React Apps
George Bukhanov
github.com/northerneyes
@notherneyes

2. Localization was always difficult

3. Even in different ecosystems
● Windows forms applications,
● Asp.net sites,
● iOS development,
● Android
● etc

4. React has no any special instruments

5. Redux can help

6. We can create a special intl reducer

7. intl reducer, an example
import 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;
}

8. Benefits
● Server rendering
● Changing locale without reloading the page
● Consistency

9. But it leads to many problems

10. We should pass msg object everywhere
const 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;
...

11. Or make all components smart

12. 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'
}
},
...

13. 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?

14. 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?

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

17. Really easy to use
import React from 'react';
import {IntlProvider} from 'react-intl';
ReactDOM.render(
<IntlProvider locale="en">
<App />
</IntlProvider>,
document.getElementById('container')
);

18. We are ready to go
render() {
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>
);
}

19. 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

20. 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>

21. Demo

22. Thank you!
Link to demo:
github.com/northerneyes/react-intl-example
@notherneyes