Make react or preact speak your language
npm install react-translate-jsonMake react speak your language.
=



Overview
--------
npm install --save react-translate-json
or
yarn add react-translate-json
`$3
Just think of it in these steps:1. Define your translation directory
1. Define the current user locale code, e.g.
'en', 'de', 'fr' and so on.
1. 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.`json
// This is our json file, with translations
{
"HELLO": "Hi {{user}}!",
"PAGES": {
"HOME": {
"TITLE": "Home Page Title"
}
}
}
``js
// 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 '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(
,
document.getElementById('root')
);
`Now, you can easily add in your translations by importing the component.
`js
// App.js
import React, { Component } from 'react';
import { TranslateComponent } from 'react-translate-json/react';class App extends Component {
render() {
return (

{/ Render-prop based /}
(
{res}
)}/>
{/ Regular component usage /}
To get started, edit src/App.js and save to reload.
);
}
}export default App;
`#### Preact
`js
// App.js
import { Component, h } from 'preact';
import { TranslateComponent } from 'react-translate-json/preact';class App extends Component {
render() {
return (
);
}
}export default App;
``