La función t en intlayer te permite declarar contenido en múltiples idiomas. Esta función garantiza la seguridad de tipos, generando un error si falta alguna traducción, lo cual es especialmente útil en entornos TypeScript.

Aquí tienes un ejemplo de cómo declarar contenido con traducciones.

**/*.content.ts

Copiar código

Copiar el código al portapapeles

import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

Configuración de Locales

Para asegurar un manejo adecuado de las traducciones, puedes configurar los locales aceptados en intlayer.config.ts. Esta configuración te permite definir los idiomas que tu aplicación soporta:

intlayer.config.ts

Copiar código

Copiar el código al portapapeles

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

Uso de Traducciones en Componentes React

Con react-intlayer, puedes usar traducciones en componentes React. Aquí tienes un ejemplo:

**/*.tsx

Copiar código

Copiar el código al portapapeles

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

Este componente obtiene la traducción correspondiente según la configuración de la localidad actual en su aplicación.

Objetos de Contenido Personalizados

intlayer soporta objetos de contenido personalizados para la traducción, permitiéndole definir estructuras más complejas mientras asegura la seguridad de tipos. Aquí hay un ejemplo con un objeto personalizado:

**/*.content.ts

Copiar código

Copiar el código al portapapeles

import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "Título de la Página",
        content: "Contenido de la Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

Declaración de contenido

Plural

Creación:2024-08-11Última actualización:2025-06-29

Referencia esta doc a tu asistente AI favorito

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección

Este documento está desactualizado, la versión base se actualizó el 23 de agosto de 2025.

Ir a la documentación en inglés

Historial de versiones

"Historial inicial"
v5.5.1029/6/2025

El contenido de esta página ha sido traducido con una IA.

Ver la última versión del contenido original en inglés

Editar esta documentación

Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.

Enlace de GitHub a la documentación

Copiar

Copiar el Markdown del documento a la portapapeles

Traducción

Definiendo Traducciones

Aquí tienes un ejemplo de cómo declarar contenido con traducciones.

**/*.content.ts

Copiar código

Copiar el código al portapapeles

import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

Configuración de Locales

Para asegurar un manejo adecuado de las traducciones, puedes configurar los locales aceptados en intlayer.config.ts. Esta configuración te permite definir los idiomas que tu aplicación soporta:

intlayer.config.ts

Copiar código

Copiar el código al portapapeles

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

Uso de Traducciones en Componentes React

Con react-intlayer, puedes usar traducciones en componentes React. Aquí tienes un ejemplo:

**/*.tsx

Copiar código

Copiar el código al portapapeles

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

Este componente obtiene la traducción correspondiente según la configuración de la localidad actual en su aplicación.

Objetos de Contenido Personalizados

**/*.content.ts

Copiar código

Copiar el código al portapapeles

import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "Título de la Página",
        content: "Contenido de la Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

Declaración de contenido

Plural