The Most Common Mistakes People Make With React With React-Intl

in case you're growing an internet application that calls for translation into more than one of a kind languages, it can be tough to put in force this manually. That's why many use internationalization (i18n) libraries, which make adding translations as easy as including any other string.

React-Intl, a part of the FormatJS set of libraries, is a pleasing library for doing simply that. Written through the folks over at Yahoo, it offers numerous React components that allow for translating strings, formatting dates, numbers, and more follow us reactjs Training 

set up
to start us off, we'll create a brand new task using Create React App and add the react-intl package.

$ yarn create react-app i18n
$ cd i18n
$ yarn add react-intl

Adding Translations
First, we'll open up src / App.js and add an object containing the phrases we'll use and their translations:

import React from "react";

const messages = {
 en: {
   greeting: "Hello {name}! How are you?",
   time: "The time is {t, time, short}.",
   date: "The date is {d, date}."
 },
 es: {
   greeting: "¡Hola {name}! ¿Cómo estás?",
   time: "La hora es {t, time, short}.",
   date: "La fecha es {d, date}."
 },
 fr: {
   greeting: "Bonjour {name}! Comment ça va?",
   time: "Il est {t, time, short}.",
   date: "La date est {d, date}."
 },
 de: {
   greeting: "Hallo {name}! Wie geht's?",
   time: "Es ist {t, time, short} Uhr.",
   date: "Das Datum ist {d, date}."
 }
};

The arguments enclosed in curly braces ({and}) let you input information and define how it will likely be formatted. For greater data, see the documentation on message syntax. Follow us Reactjs Online Training 

Writing our aspect
Now that we've got our translations written, we ought to use them in our App factor.

import React, { useState } from "react";
import { IntlProvider, FormattedMessage } from "react-intl";

const messages = {
 // -- snip --
};

function App() {
 const [name, setName] = useState("");

 const handleChange = e => {
   setName(e.target.value);
 };

 const locale = "en";

 return (
   <>
     <input placeholder="Enter name" onChange={handleChange} />

     <IntlProvider locale={locale} messages={messages[locale]}>
       <p>
         <FormattedMessage id="greeting" values={{ name }} />
         <br />
         <FormattedMessage id="time" values={{ t: Date.now() }} />
         <br />
         <FormattedMessage id="date" values={{ d: Date.now() }} />
       </p>
     </IntlProvider>
   </>
 );
}

export default App;

splendid! What we've executed is upload an, surpassed-in the locale and messages to apply, and used to render our textual content. lamentably, the only element we're seeing is English! this is due to the fact we need a few manners to trade the locale. This is quite easy, simply add the locale fee to the aspect's state and add an element detail | element to pick choose | select | pick | pick out from our four4 | four languages.

That became only a simple example of how to use react-intl. It's a completely powerful library, and that I really endorse sorting out their documentation.

// -- snip --

function App() {
 const [name, setName] = useState("");

 const handleChange = e => {
   setName(e.target.value);
 };

 const [locale, setLocale] = useState("en");

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

 return (
   <>
     <input placeholder="Enter name" onChange={handleChange} />
     <select onChange={handleSelect} defaultValue={locale}>
       {["en", "es", "fr", "de"].map(l => (
         <option key={l}>{l}</option>
       ))}
     </select>

     <IntlProvider locale={locale} messages={messages[locale]}>
       <p>
         <FormattedMessage id="greeting" values={{ name }} />
         <br />
         <FormattedMessage id="time" values={{ t: Date.now() }} />
         <br />
         <FormattedMessage id="date" values={{ d: Date.now() }} />
       </p>
     </IntlProvider>
   </>
 );
}

export default App;