🌏Internationalize React apps 👔Elegant lightweight library based on Internationalization API
This release supports nested JSON locale data. Here is example:
const locales: ILocale[] = [
{
language: 'en',
messages: {
page1: {
hello: 'Hello world!',
},
page2: {
hello: 'Hello eo-locale!',
},
},
},
];
const translator = new Translator('en', locales);
translator.translate('page1.hello'); // Hello world!
Now you can provide property tagName
in Text
component.
It is very useful for increase SEO points. For example, in you translations you have some html like:
<li>one</li>
<li>two</li>
When text component render html it creates <span>
wrapper by default. Now you can change to any html tag. Example with list:
<EOLocale.Text html id="SOME_KEY" tagName="ul" />
Property renaming onIdMissing
=> onError
.
Use onError
to handle any errors inside eo-locale
In some cases you want to find incorrect usage of translation keys. For example, you received error key from server response, and that key does not exist in current translations. You can log that kind of errors by onIdMissing
handler.
Basic example:
const App: React.FC = () => {
return (
<EOLocaleProvider language="en" locales={[]} onIdMissing={id => {
// do something
}}>
...
</EOLocaleProvider>
)
}