Tradução

    Definindo Traduções

    A função t no intlayer permite que você declare conteúdo em múltiplas línguas. Esta função garante segurança de tipos, levantando um erro se qualquer tradução estiver ausente, o que é particularmente útil em ambientes TypeScript.

    Usando TypeScript

    Aqui está um exemplo de como declarar conteúdo com traduções.

    **/*.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",      pt: "Bem-vindo à nossa aplicação", // adicionado para português    }),  },} satisfies DeclarationContent<Content>;

    Configuração para Locales

    Para garantir o manuseio adequado das traduções, você pode configurar os locais aceitos em intlayer.config.ts. Esta configuração permite que você defina os idiomas que seu aplicativo suporta:

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      Locales.PORTUGUESE,    ], // adicionado para português  },};export default config;

    Usando Traduções em Componentes React

    Com react-intlayer, você pode usar traduções em componentes React. Aqui está um exemplo:

    **/*.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 busca a tradução correspondente com base na localidade atual definida em seu aplicativo.

    Objetos de Conteúdo Personalizados

    O intlayer suporta objetos de conteúdo personalizados para tradução, permitindo que você defina estruturas mais complexas enquanto garante segurança de tipos. Aqui está um exemplo com um 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",      },      pt: {        title: "Título da Página", // adicionado para português        content: "Conteúdo da Página", // adicionado para português      },    }),  },} satisfies DeclarationContent;export default customContent;

    Se você tiver uma ideia para melhorar esta documentação, sinta-se à vontade para contribuir enviando uma pull request no GitHub.

    Link do GitHub para a documentação
    Declaração de ConteúdoEnumeração