// 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(
    <TranslateProvider {...translationOptions}>
        <App />
    </TranslateProvider>,
    document.getElementById('root')
);

// App.js
import React, { Component } from 'react';
import { TranslateComponent } from '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 */}
          <TranslateComponent label="PAGES.HOME.TITLE" render={(res) => (
            <h1 className="App-title">{res}</h1>
          )}/>
          
          {/* Regular component usage */}
          <h2 className="greet">
              <TranslateComponent 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;

// App.js
import { Component, h } from 'preact';
import { TranslateComponent } from 'react-translate-json/preact';
 
class App extends Component {
  render() {
    return (
      <div className="App">
          <h2 className="greet">
              <TranslateComponent label="HELLO" params={{user: 'John'}}/>
          </h2>
      </div>
    );
  }
}
 
export default App;