introduce international languages in react application
//steps to introduce localization into a react application
1. Start by creating a react application using $npx create-react-app my-test-localization-app --save-dev @testing-library/cypress
// we also include testing using @testing-library with support for cypress commands using (--save-dev @testing-library/cypress)
2. Install react-intl library that will help us introduce international languages into our application
By doing $npm install react-intl
3. Add en-US.json file under the src folder of the react-app file
Add ex-SP.josn file under the src folder of the react-app file
in the e-US.json file add
{
"app.header": "my amazing application heading",
"app.content": "the message part of my amazing application",
"app.channel.plug": "An application created by {name}",
}
// IN FRENCH DUDE
in the ex-MX.json file add
{
"app.header": "my amazing application heading",
"app.content": "the message part of my amazing application",
"app.channel.plug": "An application created by {name}",
}
4. Add this code to the top of the Index.js file
import {IntlProvider} from "react-intl";
//this enables us to introduce a provider to wrap around the <App /> component like so
<IntlProvider >
<App />
<IntlProvider />
5. //Import your transaleted texts into the Index.js file and include this
Import Spanish from "./languages/es-SP.json";
Import English from "./languages/en-US.json";
import {IntlProvider} from "react-intl";
//Check if the navigator language
const locale = navigator.language;
//create a varible to set in the user's locale language
let language;
Switch(locale){
case "es-SP":
language = Spanish;
break;
default:
language = English;
break;
}
<IntlProvider locale={locale} message={language} >
<App />
<IntlProvider />
6. In the App.js
Import {FormattedMessage} from "react-intl";
Inside the App component
Add this piece of code
<FormattedMessage
id="app.header"
defaultMessage="this is the fall back message if the required message fails to render"
/>