Receba notificações sobre os próximos lançamentos de Intlayer
    Criação:2024-08-11Última atualização:2025-06-29

    Tradução

    Definindo Traduções

    A função t em intlayer permite que você declare conteúdo em múltiplos idiomas. Essa função garante segurança de tipos, gerando um erro caso alguma tradução esteja faltando, o que é particularmente útil em ambientes TypeScript.

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

    **/*.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>;

    Configuração para Locales

    Para garantir o manuseio adequado das traduções, você pode configurar os locales aceitos em intlayer.config.ts. Essa configuração permite definir os idiomas que sua aplicação suporta:

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  },};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 no idioma atual definido em sua aplicação.

    Objetos de Conteúdo Personalizados

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

    Histórico do Documento

    • 5.5.10 - 2025-06-29: Histórico inicial
    Receba notificações sobre os próximos lançamentos de Intlayer