DEV Community

Discussion on: Translate your React app using Format.js

View post
Collapse
 
charlottekellogg944 profile image
charlottekellogg944 • • Edited

To translate your React app using Format.js and software localization, you need to follow these steps:

  1. Install the required dependencies: npm install react react-intl
  2. Set up the IntlProvider component in your main app file (App.js): 
import React, { useState } from 'react';
import { IntlProvider } from 'react-intl';
import messages_en from './translations/en.json';
import messages_fr from './translations/fr.json';
import messages_es from './translations/es.json';
// Import other language translation files as needed

function App() {
  const [locale, setLocale] = useState('en');

  const messages = {
    en: messages_en,
    fr: messages_fr,
    es: messages_es,
    // Add other language translations here
  };

  const handleLocaleChange = (e) => {
    setLocale(e.target.value);
  };

  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <div className="app">
        {/* Your app components */}
        <select value={locale} onChange={handleLocaleChange}>
          <option value="en">English</option>
          <option value="fr">Français</option>
          <option value="es">Español</option>
          {/* Add other language options as needed */}
        </select>
      </div>
    </IntlProvider>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

In this example, we import translation messages for English (en.json), French (fr.json), Spanish (es.json), and other languages as needed. The locale state manages the selected language. We use the select element to allow the user to switch between languages.

Create translation files for each supported language:

Create a translations folder in your project root directory.
Inside the translations folder, create a separate JSON file for each language, following the format: languageCode.json (e.g., en.json, fr.json, es.json).
Populate each translation file with key-value pairs representing the translated messages for that language. For example:
Enter fullscreen mode Exit fullscreen mode 

// en.json
{
  "app.greeting": "Hello!",
  "app.button": "Click me!"
}

// fr.json
{
  "app.greeting": "Bonjour !",
  "app.button": "Cliquez ici !"
}
// es.json
{
  "app.greeting": "¡Hola!",
  "app.button": "Haz clic aquí"
}
Enter fullscreen mode Exit fullscreen mode

Wrap the components you want to translate with the FormattedMessage component from react-intl. Use the translated message keys from your JSON files to display the translated content. For example:

import React from 'react';
import { FormattedMessage } from 'react-intl';

function Greeting() {
  return (
    <div>
      <FormattedMessage id="app.greeting" defaultMessage="Hello!" />
    </div>
  );
}

export default Greeting;
Enter fullscreen mode Exit fullscreen mode

To manage the translation files efficiently, you can use software localization tools such as Phrase, Transifex, or Lokalise.