npm install simple-localizer
Wrap any portion of your React project with the Localizer component. You can set the default language, with the languages property, showKeys will return the provided key if a value is not found, and debug will print messages to the developer console. This component can be at the top level of your React DOM like so:
import my_localizations from './lang';
ReactDOM.render(
<React.StrictMode>
<Localizer languages={my_localizations} default="en" showKeys debug>
<App />
</Localizer>
</React.StrictMode>,
document.getElementById('root')
);
Define the languages array like so:
const my_localizations =
[{
code:"de",
name:"Deutsche",
data: {
"hello": "Hallo",
"goodbye": "Auf Wiedersehen",
"thank_you": "Danke schön"
}
},
{
code:"jp",
name:"日本語",
data: {
"hello": "こんにちは",
"goodbye": "さようなら",
"thank_you": "ありがとうございました"
}
}];
export default my_localizations;
Localized language components can easily be added to your existing pages, using a combination of the LocalizerItem, LocalizerData, & LocalizerPicker components. Using the lang property you can force a value to always take on a certain locale. You can also add more language values, per page, this is useful for blog pages with unique data.
render() {
var additional = [
{
"code": "sp",//adding a new language with its own values
"name": "Spanish",
data: {
"how_are_you": "¿cómo estás?"
}
},{
"code": "jp",
data: {
"how_are_you": "元気ですか?"//adding a new value
}
},{
"code": "en",
data: {
"how_are_you": "How are you?"//adding a new value
"hello": "Hi!"//updating an existing value
}
}
]
return(
<div>
<LocalizerPicker/>
<LocalizerData content={additional}/>
<h2><LocalizerItem lkey="hello"/></h2>
<p><LocalizerItem lkey="goodbye" lang="jp"/></p>
<a href="#"><LocalizerItem lkey="how_are_you"/></a>
</div>
);
}
MIT © nichnet