Convert translations files csv spreadsheets easy
Tags: excel, converter
Published: 2023-11-04 15:17:04

---
title: Convert translations files csv spreadsheets easy
published: true
date: 2023-11-03 00:08:00 UTC
tags: Excel,Converter
canonical_url: https://reactjsexample.com/convert-translations-files-csv-spreadsheets-easy/
---

# 🚀 Welcome translate files!

## Internationalize your website or app in a simple way 🇨🇴 🇺🇸 🇩🇪

## ✅ Let’s speak in the same language!
 ![Convert translations files csv spreadsheets easy](https://reactjsexample.com/content/images/2023/10/Code_2023-10_22-03-01.jpg)

![Convert translations files csv spreadsheets easy](https://user-images.githubusercontent.com/57574910/278198475-5e874c0f-f857-4a5b-bc15-de16112d9aa4.gif)

## Open url and duplicate file in your google drive.

🟢 [document base spreadsheets translations](https://docs.google.com/spreadsheets/d/1DP_xHUndNhb4900eaHwOZC03YhDO2LozwFUYOx89e7U/edit)

- 
#### Share document

  - give read permission
  - copy link
  - get document ID from url

![Convert translations files csv spreadsheets easy](https://user-images.githubusercontent.com/57574910/190467883-9f017028-a02f-4e78-b5a9-d279e277c4dd.png)

- duplicate document in your drive

![Convert translations files csv spreadsheets easy](https://user-images.githubusercontent.com/57574910/190468094-03938268-16ca-44eb-97ee-91dd69e52ae8.png)

- we give our copy a name

![Convert translations files csv spreadsheets easy](https://user-images.githubusercontent.com/57574910/190468304-ce8b847e-29f1-4e1e-9568-3765bed327db.png)

- We add our translations by editing the **base column**
  - **key:** the unique key we use in our app to translate text t(‘actions.save’)
  - **base:** the text that we enter so that spreadsheets creates the translations automatically
  - **es,en,it,fr:** base languages ​​that the template has, you can add or remove languages

![Convert translations files csv spreadsheets easy](https://user-images.githubusercontent.com/57574910/190469921-27afec29-803c-4c05-aea4-00f5d0fcd039.png)

- brings the following as a base configuration

![Convert translations files csv spreadsheets easy](https://user-images.githubusercontent.com/57574910/190471046-cbc02298-ca21-4291-acc2-3fc5398919e0.png)

```
// src/utils/translate.js
const { translateFileCsv } = require("@neiderruiz/translate-files");

translateFileCsv('19sxdh1WE5RMXiuTWuMJonu81NWrewZbZ','./translations')
```

- add script in package.json

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

- run script

```
npm run translate
```

- result

![Convert translations files csv spreadsheets easy](https://user-images.githubusercontent.com/57574910/190472890-5a6d1d64-7cd7-4480-9ece-23a4906b008e.png)

- en

[![Convert translations files csv spreadsheets easy](https://user-images.githubusercontent.com/57574910/278115861-62e29d22-2f12-4f78-92a6-4627d538f3be.png)](https://user-images.githubusercontent.com/57574910/278115861-62e29d22-2f12-4f78-92a6-4627d538f3be.png)

- es

[![Convert translations files csv spreadsheets easy](https://user-images.githubusercontent.com/57574910/278116118-0020f998-75ac-4a23-9e8b-d027b5ae9114.png)](https://user-images.githubusercontent.com/57574910/278116118-0020f998-75ac-4a23-9e8b-d027b5ae9114.png)

- fr

[![Convert translations files csv spreadsheets easy](https://user-images.githubusercontent.com/57574910/278116162-63a73927-8dd7-4072-b5c1-04b24773afb6.png)](https://user-images.githubusercontent.com/57574910/278116162-63a73927-8dd7-4072-b5c1-04b24773afb6.png)

- de

[![Convert translations files csv spreadsheets easy](https://user-images.githubusercontent.com/57574910/278116198-3cdc0dbe-f25a-49a0-97c9-9e63fc7a61aa.png)](https://user-images.githubusercontent.com/57574910/278116198-3cdc0dbe-f25a-49a0-97c9-9e63fc7a61aa.png)

# implement in React Js

## install package

```
npm i @neiderruiz/translate-files react-i18next i18next
```

- get translations spreadsheet id

```
// src/utils/translate.js
import { translateFileCsv } from '@neiderruiz/translate-files'

translateFileCsv('1UwWGPdr8XDO29tNzFiJtPDTFVt1xCLG-gSVeQd-x5Oc', './src/locales/translations')
```

- add script in package.json

```
// package.json
{
    "scripts": {
        ...more scripts,
        "translate": "node src/utils/translate.js"
    }
}
```

- make resources file

```
// src/locales/index.js
import en from './translations/en.json'
import es from './translations/es.json'
import fr from './translations/fr.json'

export const resources = {
    en: {
        translation: en
    },
    es: {
        translation: es
    },
    fr: {
        translation: fr
    }
}
```

- create file i18n.js

```
// src/locales/i18n.ts
import i18n from "i18next";

import { initReactI18next } from "react-i18next";
import { resources } from ".";

i18n.use(initReactI18next)
.init({
    resources,
    lng: "es",
    fallbackLng: "es",
    interpolation: {
        escapeValue: false
    }
});

export default i18n;
```

- add i18n in index.js

```
// src/main.tsx or src/App.tsx
import './locales/i18n';
```

- make Hook useTranslate React Js

```
// src/hooks/use-translate.tsx
import { useTypedTranslation } from '@neiderruiz/translate-files/dist/react'
import en from '../locales/translations/en.json'
import i18n from '../locales/i18n'

type Tylelang = typeof en

const useTranslation = () => {
    const { t } = useTypedTranslation<Tylelang>()
    return {
        t,
        i18n
    }
}

export default useTranslation
```

- how use hook

```
// src/components/Example.tsx
import React from 'react'
import useTranslation from '../hooks/use-translate'

const Example = () => {
    const { t } = useTranslation()
    return (
        <div>
            {t('actions.save')}
            {/\* how pased params \*/}
            <span>
                {t('actions.save\_items', ['mi param', 'second param'])}
            </span>
        </div>
    )
}
```

## GitHub

[View Github](https://github.com/neiderruiz/translate-files?ref=reactjsexample.com)