Extract translations keys and configure live updates
This guide will show you how to extract translation keys from local project files. In the second part you will focus on configuring real-time translation updates.
Installation
Install SimpleLocalize CLI
curl -s https://get.simplelocalize.io/install | bash
Problems with CLI? Checkout troubleshooting section.
Extract translation keys
Use SimpleLocalize CLI to extract and upload all translation keys from your project. CLI will find all usages of t('KEY')
in your files and add them to the project.
simplelocalize extract \
--apiKey <PROJECT_API_KEY> \
--projectType i18next/i18next \
--searchDir ./src
Learn more about message extraction from project files.
Translate your messages
Now you can use translation editor to add localized messages for each key.
Translation hosting
Let's focus now on integrating translation hosting to use translated messages in your application.
Install dependencies
# Using NPM
npm install --save react-i18next i18next i18next-http-backend i18next-browser-languagedetector
# Using yarn
yarn add react-i18next i18next i18next-http-backend i18next-browser-languagedetector
Configure i18next
Create i18n.ts
file with i18next configuration. This file will be imported in index.ts
.
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
const projectToken = "5e13e3019cff4dc6abe36009445f0883";
const loadPath = `https://cdn.simplelocalize.io/${projectToken}/_latest/i18next/{{lng}}/{{ns}}/_index`;
i18n
.use(Backend)
.use(LanguageDetector)
.use (initReactI18next)
.init({
// default/fallback language
fallbackLng: 'en',
ns: ["default"],
defaultNS: "default",
//detects and caches a cookie from the language provided
detection: {
order: ['queryString', 'cookie'],
cache: ['cookie']
},
interpolation: {
escapeValue: false
},
backend: {
loadPath
}
})
export default i18n;
Configure i18next in application
Import i18n.ts
file in index.ts
by adding import './i18n';
Whole index.ts
file should look like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './i18n'; // import i18next configuration (!!)
ReactDOM.render (
<React.StrictMode>
<Suspense fallback={<div>Loading...</div>}>
<App />
</Suspense>
</React.StrictMode>,
document.getElementById('root')
);
Example usage
import React from "react";
import { useTranslation } from "react-i18next";
function App() {
const { t, i18n } = useTranslation();
return (
<div>
<p>
{t("USE_BUTTONS_BELOW")}
</p>
<button onClick={() => i18n.changeLanguage("en")}>English</button>
<button onClick={() => i18n.changeLanguage("es")}>Spanish</button>
</div>
);
}
export default App;
Use t
function to get translation from given translation key
t("USE_BUTTONS_BELOW")
Switch languages with i18n.changeLanguage(language)
. i18n
object comes from React Hook called useTranslations()
;
Good job!
Now your users will see the updated translation every time you click 'Publish' button in the translation editor!
More resources: