Creation:2024-08-11Last update:2025-06-29

    Traducción

    Definiendo Traducciones

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