Traducción

    Definiendo Traducciones

    La función t en intlayer te permite declarar contenido en múltiples idiomas. Esta función asegura la seguridad de tipos, generando un error si faltan traducciones, lo cual es particularmente útil en entornos TypeScript.

    Usando TypeScript

    Aquí hay 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 para 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;

    Usando Traducciones en Componentes React

    Con react-intlayer, puedes usar traducciones en componentes 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 basada en el locale actual configurado en tu aplicación.

    Objetos de Contenido Personalizados

    intlayer soporta objetos de contenido personalizados para traducción, permitiéndote 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;

    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
    DiccionarioEnumeración