Jump to main content

React

Let's start by creating a basic React project; if you already have a project, we can move forward.

Creating a project using Vite

Terminal
npm create vite@latest my-react-app --template react

Set up Translate Projects

We installed the base packages to set up our translations with i18n.

Terminal
npm i i18next react-i18next i18next-http-backend

We need to install the translate-projects-react package in our project.

npm i translate-projects-react

Set up i18n

We begin with the configuration of i18n, for which we will create an i18n.ts or i18n.js file in the src folder of our project.

  • TypeScript

    Terminal
    touch src/i18n.ts
  • JavaScript

    Terminal
    touch src/i18n.js

After creating our file, we need to add the following configuration to our i18n.ts or i18n.js file.

i18n.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import HttpBackend from "i18next-http-backend";

i18n
.use(HttpBackend)
.use(initReactI18next)
.init({
interpolation: {
escapeValue: false,
},
ns: ["translation"],
defaultNS: "translation",
lng: "es",
fallbackLng: ["es", "en"],
debug: true,
backend: {
loadPath: "/locales/lng/ns.json",
},
});

export default i18n;

Now we just need to import this file into our main project file.

In this case, we will add it inside our main.tsx file in the following way.

src/main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import "./i18n"; // We import the i18n file.

createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)

Automate translations

We are going to create a file translate.js in the utils folder and add the following code:

utils/translate.js
import { translateProject } from 'translate-projects-react';

translateProject({
sourceLang: 'es', // Default language
targetLangs: ['en'], // Languages to translate
apiKey: '#' //Your API key
});

Create account

🚀 Automate and optimize your translations.

To make the most of Translate Projects, you need an API Key. Sign up with no obligation.

  • We do not ask for a credit card to try Translate Projects.

Benefits of obtaining your API Key

  • Smart Management: Sync and automatically manage the translations of your projects.
  • Exclusive Administrative Panel: Customize and oversee all your translations from a centralized interface.
  • Priority Support: Receive quick and specialized technical assistance when you need it.
  • Accurate Translations: Our technology understands the context of your code to provide accurate translations.
  • 30,000 Welcome Eniacs: Test all the features without obligation with internal tokens that enhance your translations.

Sign up now and get your API Key to unlock the full potential of Translate Projects!

Create account now→


Set up command for npm

Add the following command in your package.json file:

package.json
"scripts": {
"translate": "node ./utils/translate.js"
}

First translations

We can do it in multiple ways, but let's look at the following three methods.

Using the Trans tag with Scanner

  • You simply enable the scanner, and it will take care of extracting all the translations from your project.

We are going to create a file translate.js in the utils folder and add the following code:

utils/translate.js
import { translateProject } from 'translate-projects-react';

translateProject({
sourceLang: 'es', // Default language
targetLangs: ['en'], // Languages to translate
apiKey: '#', //Your API key
scanner: true // We enabled the scanner.
});

We use the Trans tag to show our translation.

src/App.tsx
import { Trans } from 'react-i18next';

function App() {
return (
<div>
<header>
<Trans>Hola Este es un ejemplo de traduccion</Trans>
</header>
</div>
);
}
  • Now we execute the command that will perform the translations:
Terminal
npm run translate

Import i18n file

  • This will create a folder with the language code and inside it will have a translate.json in the public/locales folder, as shown in the following image.

Import i18n file

They will have the following content:

public/locales/es/translate.json
{
"Hola Este es un ejemplo de traduccion base": "Hola Este es un ejemplo de traduccion base"
}
public/locales/en/translate.json
{
"Hola Este es un ejemplo de traduccion base": "Hello This is a base translation example"
}

Using our translation hook

We created our basic translation hook.

src/useTranslation.tsx
import { useTypedTranslation } from 'translate-projects-react/hooks';

export const useTranslation = () => {
return useTypedTranslation()
}

We are going to use our translation hook in the component where we want to translate.

src/App.tsx
import { useTranslation } from './useTranslation'; We import our hook.

function App() {
const { t } = useTranslation();
return (
<div>
<header>
{t('Hola Este es un ejemplo de traduccion base')}
</header>
</div>
);
}

export default App;

Now we execute our commands so that our translations are executed.

Terminal
npm run translate

Enable translation autocomplete

Import i18n file

Let's create our custom hook to use translation autocomplete.

  • TypeScript
    src/hooks/useTranslation.tsx
    import { useTypedTranslation } from 'translate-projects-react/hooks';
    import translation from '../public/locales/es/translation.json';

    type Tylelang = typeof translation

    export const useTranslation = (ns: string = 'translation') => {
    return useTypedTranslation<Tylelang>(ns)
    }

Adding translations manually

If you need to add translations manually, you can do it as follows.
We create a file translate.json in the public/locales/es folder and we will add our translations.

Terminal
touch public/locales/es/translate.json
  • This will create a translate.json file in the public/locales/es folder with the following content:
public/locales/es/translate.json
{
"Hola Este es un ejemplo de traduccion base": "Hola Este es un ejemplo de traduccion base"
}

If you wish, you can manually add keys to your translations.

{
"hello": "Hola este es un ejemplo de traduccion base"
}

You would use it in your component like this.

src/App.tsx
import { useTranslation } from './useTranslation'; We import our hook.

function App() {
const { t } = useTranslation();
return (
<div>
<header>
{t('hello')}
</header>
</div>
);
}

export default App;
Support

We are here to help you.

If you have any questions, need help, or want to contribute, feel free to contact me. I am here to support you with whatever you need.

Support the Project

If this project has been useful to you, I invite you to buy me a coffee. Your support helps me continue improving and creating valuable content. Thank you for being here! ☕

Buy me a coffee