1.1.6 β’ Published 3 months ago
@neiderruiz/translate-files v1.1.6
π Welcome translate files!
Internationalize your website or app in a simple way π¨π΄ πΊπΈ π©πͺ
β Let's speak in the same language!
π Table of Contents
- π Getting started
- π¦ Convert JSON to CSV
- π΅ Implement in React Js
- π Implement in Astro
- π’ Implement in NextJs
1. Install
npm i @neiderruiz/translate-files
import { translateFileCsv } from "@neiderruiz/translate-files";
- or
const { translateFileCsv } = require("@neiderruiz/translate-files");
- usign
translateFileCsv(idDocument,routeFolderSave)
generate
π If you already have a json with your translations you can use it as a base!
- separator your key separator '&&' or '-', default is '.'
- langs your langs translate website, default is empty (https://github.com/neiderruiz/translate-files/blob/main/src/types/langs.ts){:target="_blank"}
- example 'es', 'en', 'fr', 'gu'
- nameFile name file result, default is 'result'
const { convertJsonToCsv } = require("@neiderruiz/translate-files");
const data = require('../services/lang/languages/es.json')
convertJsonToCsv(data, {
separator: '.',
langs: ['es', 'en', 'fr', 'gu'],
nameFile: 'my_result'
})
2. configure translations
import your result in Google Drive open google drive
- after open file with google sheets
after select keys and base, and copy in your copy of next document
Open url and duplicate file in your google drive.
π’ document base spreadsheets translations
Share document
- give read permission
- copy link
- get document ID from url
- duplicate document in your drive
- we give our copy a name
- 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
we press share
- brings the following as a base configuration
- we update it as follows and click on done
- we extract the document id from our url
// 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
- en
- es
- fr
de
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, FlattenKeys } from '@neiderruiz/translate-files/react'
import en from '../locales/translations/en.json'
import i18n from '../locales/i18n'
type Tylelang = typeof en
export type KeysTranslation = FlattenKeys<Tylelang>
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>
)
}
implement in Astro
install packages
npm i @neiderruiz/translate-files astro-i18next @types/i18next -D
- config astro-i18next
view documentation
// astro.config.mjs
import { defineConfig } from "astro/config";
import astroI18next from "astro-i18next";
export default defineConfig({
integrations: [astroI18next()],
});
- make file config
//astro-i18next.config.mjs
export default {
defaultLocale: "en",
locales: ["en", "fr"],
};
- get translations spreadsheet id
// src/utils/translate.js
const { makeTranslations } = require("@neiderruiz/translate-files/astro");
makeTranslations('1UwWGPdr8XDO29tNzFiJtPDTFVt1xCLG-gSVeQd-x5Oc')
- add script in package.json
// package.json
{
"scripts": {
...more scripts,
"translate": "node ./src/utils/translate.js && npx astro-i18next generate"
}
}
- example use in astro
// src/pages/index.astro
---
import { t } from "i18next";
---
<h1>{t('actions.save')}</h1>
- example interpolate params
// src/pages/index.astro
---
import { t } from "i18next";
---
<h1>{t('test.counting',['1','20'])}</h1>
// result <h1>counting 1 of 20</h1>
implement in NextJs
install packages
npm i @neiderruiz/translate-files @types/i18next next-i18n-router -D
- config next.js
// ./src/utils/translate.js
const { translateFileCsv } = require("@neiderruiz/translate-files");
const documentId = 'documentId spreadsheets';
const folderSave = './src/service/languages';
translateFileCsv(documentId, folderSave, {
separator: '.',
});
- add script in package.json
// package.json
{
"scripts": {
...more scripts,
"translate": "node src/utils/translate.js"
}
}
- run get translations
npm run translate
- export all translations in index.ts
// in folderSave create (index.ts) and export your translation json
import en from './en.json';
import es from './es.json';
import fr from './fr.json';
export const resources = {
en: {
translation: en,
},
es: {
translation: es,
},
fr: {
translation: fr,
},
};
- create i18nConfig.js ot i18nConfig.ts
// ./i18nConfig.ts
export const i18nConfig = {
locales: ['en', 'es','fr'], // add your translations
defaultLocale: 'es', // add your default translation
localeDetection: true
}
- add middleware
// ./src/middleware.ts
import { i18nRouter } from "next-i18n-router";
import i18nConfig from'../i18nConfig'
export function middleware(req: any){
return i18nRouter(req, i18nConfig)
}
export const config = {
matcher: "/((?!api|static|.*\\..*|_next).*)"
}
make folder locale in folder app
- basic structure src/app/locale
move all files in folder locale
src/app/locale
src/app/locale/layout.tsx
src/app/locale/page.tsx
src/app/locale/about/page.tsx
src/app/locale... and more pages...
- implement Provider
// src/app/[locale]/layout.tsx
import { TranslationsProvider } from "@neiderruiz/translate-files/next-js";
//const folderSave = './src/service/languages';
// import of folderSave resources
import { resources } from "./src/service/languages"
//or
import { resources } from "@/service/languages"
import i18nConfig from "../../../i18nConfig";
type Props ={
children: React.ReactNode;
params: {
locale: string
}
}
export default function RootLayout({
children,
params: { locale }
}: Readonly<Props>) {
return (
<html lang={locale}>
<body>
<TranslationsProvider
locale={locale}
fallbackLng={i18nConfig.locales}
resources={resources}
>
{children}
</TranslationsProvider>
</body>
</html>
);
}
- Create custom hook autocomplete
// ./src/hooks/useTranslation.tsx
import { FlattenKeys, useTypedTranslation } from '@neiderruiz/translate-files/next-js/hooks';
import en from '@/service/languages/en.json';
type Tylelang = typeof en
export type KeysTranslation = FlattenKeys<Tylelang>
const useTranslation = () => {
return {
...useTypedTranslation<Tylelang>()
}
}
export default useTranslation
- how use
// ./src/[locale]/about/page.tsx
"use client"
import useTranslation from '@/hooks/useTranslation';
import Link from 'next/link';
const Page = () => {
const { t, i18n } = useTranslation();
return <div>
<h1>{t('actions.welcome')}</h1>
<Link href={`/${i18n.language}/home`}>
frances
</Link>
<Link href={`/fr/home`}>
frances
</Link>
<Link href={'/en/home'}>
ingles
</Link>
<Link href={'/es/home'}>
EspaΓ±ol
</Link>
</div>
}