Skip to main content
AutoLog includes built-in internationalization support for Spanish and English using react-i18next. The system automatically detects the user’s browser language and persists their language preference.

​
Language Support

AutoLog supports the following languages:
  • Spanish (es-HN) - Default language
  • English (en-US) - Secondary language

​
Implementation

​
i18n Configuration

The i18n system is configured in src/config/i18n.js:
src/config/i18n.js
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

import es from "../locales/es/translation.json";
import en from "../locales/en/translation.json";

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      "es-HN": { translation: es },
      "en-US": { translation: en },
      es: { translation: es },
      en: { translation: en },
    },
    fallbackLng: "es-HN",
    detection: {
      order: ["localStorage", "navigator"],
      caches: ["localStorage"],
    },
    interpolation: {
      escapeValue: false,
    },
  });

​
Translation Files

Translation files are located in src/locales/ directory: 
src/locales/
├── es/
│   └── translation.json
└── en/
    └── translation.json

​
Using Translations

​
Basic Usage

Use the useTranslation hook in your components: 
import { useTranslation } from "react-i18next";

export default function MyComponent() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t("dashboard.title")}</h1>
      <p>{t("dashboard.subtitle")}</p>
    </div>
  );
}

​
With Variables

Translations support variable interpolation: 
const { t } = useTranslation();

// Translation: "Showing {{count}} of {{total}}"
const message = t("common.showing_results", { count: 10, total: 100 });
// Result: "Showing 10 of 100"

​
Common Translation Keys

Here are frequently used translation keys: 
{
  "common.actions.save": "Guardar / Save",
  "common.actions.cancel": "Cancelar / Cancel",
  "common.actions.edit": "Editar / Edit",
  "common.actions.delete": "Eliminar / Delete",
  "common.actions.export": "Exportar / Export",
  "common.actions.import": "Importar / Import"
}

​
Switching Languages

​
Programmatic Language Switch

To change the language programmatically: 
import { useTranslation } from "react-i18next";

export default function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <button onClick={() => changeLanguage("es")}>Español</button>
      <button onClick={() => changeLanguage("en")}>English</button>
    </div>
  );
}

​
Get Current Language

const { i18n } = useTranslation();
const currentLanguage = i18n.language; // "es-HN" or "en-US"

​
Language Detection

The system detects language in the following order:
1

localStorage

Checks for previously saved language preference in browser storage
2

Browser Navigator

Falls back to browser’s language setting (navigator.language)
3

Fallback

Uses Spanish (es-HN) as the default fallback language

​
Adding New Translations

To add new translation keys:
1

Add to Spanish Translation

Edit src/locales/es/translation.json:
{
  "myFeature": {
    "title": "Mi Nueva Función",
    "description": "Descripción de la función"
  }
}
2

Add to English Translation

Edit src/locales/en/translation.json:
{
  "myFeature": {
    "title": "My New Feature",
    "description": "Feature description"
  }
}
3

Use in Component

const { t } = useTranslation();
return <h1>{t("myFeature.title")}</h1>;

​
Translation Structure

Translations are organized by feature area: 
{
  "common": {
    "loading": "Cargando...",
    "actions": { ... },
    "status": { ... }
  },
  "home": { ... },
  "menu": { ... },
  "dashboard": { ... },
  "settings": { ... }
}
Use nested keys to organize related translations. For example, all button actions are under common.actions.*

​
Best Practices

  • Always provide translations for both Spanish and English
  • Use descriptive key names that reflect the content
  • Group related translations under common namespaces
  • Test with both languages enabled
  • Avoid hardcoded strings in components

​
Translation Examples

​
Form Labels

const { t } = useTranslation();

return (
  <FormControl>
    <FormLabel>{t("form.email")}</FormLabel>
    <Input placeholder={t("form.email_placeholder")} />
  </FormControl>
);

​
Error Messages

const { t } = useTranslation();

try {
  // API call
} catch (error) {
  toast.error(t("common.unknown_error"));
}

​
Pluralization

// In translation file:
// "items_count": "{{count}} item",
// "items_count_plural": "{{count}} items"

const message = t("items_count", { count: items.length });

Build docs developers (and LLMs) love

Get started for freeTalk to us