@neiderruiz/translate-files
TypeScript icon, indicating that this package has built-in type declarations

1.1.7 • Public • Published

🚀 Welcome translate files!

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

✅ Let's speak in the same language!

image

📖 Table of Contents

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 ] view list{: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

image

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

image

  • duplicate document in your drive

image

  • we give our copy a name

image

  • 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

image

  • we press share

image

  • brings the following as a base configuration

  • we update it as follows and click on done

  • we extract the document id from our url

image

// 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

image

  • en

image

  • es

image

  • fr

image

  • de

image

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

make translation with CSV

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

const documentId = 'documentId spreadsheets';
const folderSave = './src/service/languages';

translateFileCsv(documentId, folderSave, {
    separator: '.',
});

make translation with JSON

// ./src/utils/translate.js
const { translateFileJson } = require("@neiderruiz/translate-files");
const es =  require('./es.json')

const folderSave = './src/service/languages';

translateFileJson(es,folderSave, {
    input: 'es',
    outputs: ['en','fr'];    
});
  • 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>
}

Package Sidebar

Install

npm i @neiderruiz/translate-files

Weekly Downloads

27

Version

1.1.7

License

MIT

Unpacked Size

80.4 kB

Total Files

64

Last publish

Collaborators

  • neiderruiz