React JSON Translation component based on @cristianbote's original, tweaked for React v18
Overview
Instalation
npm install --save react-translate-json
Getting started
Just think of it in these steps:
- Define your translation directory
- Define the current user locale code, e.g.
'en','de','fr'and so on. - Optionally use a fallback language code. Usually
'en'.
Then, use the thin, built-in component, to translate your strings.
Example
The following examples are based on create-react-app results.
// This is our json file, with translations
{
"HELLO": "Hi {{user}}!",
"PAGES": {
"HOME": {
"TITLE": "Home Page Title"
}
}
}// This is usually our index.js
import React from 'react';
import ReactDOM from 'react-dom';
// Import the TranslateProvider function to provide the service with your settings
import { TranslateProvider } from '@rubancorp/react-translate-json';
import App from './App';
const translationOptions = {
pathPrefix: '/translations', // Path to your translations
locale: 'en', // User current locale
fallbackLocale: 'en' // Fallback locale
};
// That's it! You are all set!
ReactDOM.render(
<TranslateProvider {...translationOptions}>
<App />
</TranslateProvider>,
document.getElementById('root')
);Now, you can easily add in your translations by importing the component.
// App.js
import React, { Component } from 'react';
import { Translate } from '@rubancorp/react-translate-json/react';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
{/* Render-prop based */}
<Translate label="PAGES.HOME.TITLE" render={(res) => (
<h1 className="App-title">{res}</h1>
)}/>
{/* Regular component usage */}
<h2 className="greet">
<Translate label="HELLO" params={{user: 'John'}}/>
</h2>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;Preact
// App.js
import { Component, h } from 'preact';
import { Translate } from '@rubancorp/react-translate-json/preact';
class App extends Component {
render() {
return (
<div className="App">
<h2 className="greet">
<Translate label="HELLO" params={{user: 'John'}}/>
</h2>
</div>
);
}
}
export default App;