Upload
george-bukhanov
View
77
Download
1
Embed Size (px)
Citation preview
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