Traducción

    Definiendo Traducciones

    La función t en intlayer te permite declarar contenido en varios idiomas. Esta función garantiza la seguridad de tipo, generando un error si faltan traducciones, lo cual es especialmente útil en entornos TypeScript.

    Usando TypeScript

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

    **/*.content.ts
    import { t, type DeclarationContent } 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 DeclarationContent<Content>;

    Configuración para Locales

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

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  },};export default config;

    Usando Traducciones en Componentes de React

    Con react-intlayer, puedes usar traducciones en componentes de React. Aquí hay 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 basándose en el locale actual establecido en tu aplicación.

    Objetos de Contenido Personalizados

    intlayer admite objetos de contenido personalizados para traducción, permitiendo que definas estructuras más complejas mientras garantizas la seguridad de tipos. Aquí hay un ejemplo con un objeto personalizado:

    **/*.content.ts
    import { t, type DeclarationContent } 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 DeclarationContent;export default customContent;

    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
    Declaración de ContenidoEnumeración