latest
legacy v9
Drawbacks of other i18n solutions
Using a pure javascript i18n framework
1
import React, { Component } from "react";
2
import { createRoot } from 'react-dom/client';
3
import i18n from "i18next";
4
​
5
// translation catalog
6
const resources = {
7
en: {
8
translation: {
9
"welcome": "Welcome to React and react-i18next"
10
}
11
}
12
};
13
​
14
// initialize i18next with catalog and language to use
15
i18n.init({
16
resources,
17
lng: "en"
18
});
19
​
20
class App extends Component {
21
render() {
22
return <h2>{i18n.t('welcome')}</h2>;
23
}
24
}
25
​
26
// append app to dom
27
const root = createRoot(document.getElementById('root'));
28
root.render(
29
<App />
30
);
Copied!
More react adapted "react-i18n"
The above is basically how every i18n framework for react works. The translations and language get set when initiated and a translation function is made available. You could easily extend this hiding the i18n.init inside a provider and pass down the function by context to another component to translate strings.
So let's make this more visible with some pseudo code:
1
import React, { Component } from "react";
2
import { createRoot } from 'react-dom/client';
3
import { I18nProvider, FormattedString } from "i18nLib";
4
​
5
// import translation catalog
6
import resources from './catalog-en.json';
7
​
8
class App extends Component {
9
render() {
10
return <h2><FormattedString msg="welcome" /></h2>;
11
}
12
}
13
​
14
// append app to dom
15
const root = createRoot(document.getElementById('root'));
16
root.render(
17
<I18nProvider lng="en" resources={resources}>
18
<App />,
19
</I18nProvider>
20
);
Copied!
The drawbacks
Before we come to the drawbacks let's highlight some advantages of those solutions above - they are very simple to get started.
Changing the language
Can you easily change the language? Get the translations in other language loaded? Does the language change trigger a rerender?
Scale and split your translations into multiple files
When your project gets bigger you do not only want code splitting but you also like to load translations on demand to avoid loading all translations upfront which would result in bad load times for your website.
With loading translations asynchronous there comes another problem - does your framework handle the pending state during loading translation?
Can you translate combined jsx nodes in one sentence
Let's take following content:
1
<p>
2
Hello <strong>{name}</strong>, you have
3
<Link to="/msgs">{count} unread message(s)</Link>.
4
</p>
Copied!
In most frameworks you will end having to split this into multiple translation strings. But for your translators it would make sense to have this as one sentence to translate like eg.:
1
Hello <1>{name}</1>, you have <3>{count} unread message(s)</3>.
Copied!
Last modified 23d ago