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

    Documentação: Função t no react-intlayer

    A função t no pacote react-intlayer é uma ferramenta fundamental para internacionalização inline dentro da sua aplicação React. Ela permite que você defina traduções diretamente dentro dos seus componentes, facilitando a exibição de conteúdo localizado com base na localidade atual.


    Visão Geral

    A função t é usada para fornecer traduções para diferentes localidades diretamente nos seus componentes. Ao passar um objeto contendo traduções para cada localidade suportada, t retorna a tradução apropriada com base no contexto da localidade atual na sua aplicação React.


    Principais Características

    • Traduções Inline: Ideal para textos rápidos e inline que não requerem uma declaração de conteúdo separada.
    • Seleção Automática de Localidade: Retorna automaticamente a tradução correspondente à localidade atual.
    • Suporte ao TypeScript: Fornece segurança de tipos e autocompletar quando usado com TypeScript.
    • Integração Fácil: Funciona perfeitamente dentro de componentes React.

    Assinatura da Função

    typescript
    t<T extends string>(content: Record<LocalesValues, T>, locale?: Locales): string

    Parâmetros

    • translations: Um objeto onde as chaves são códigos de localidade (ex.: en, fr, es) e os valores são as strings traduzidas correspondentes.

    Retorna

    • Uma string representando o conteúdo traduzido para a localidade atual.

    Exemplos de Uso

    Uso Básico de t em um Componente

    src/components/ComponentExample.tsx
    import type { FC } from "react";import { t } from "react-intlayer";export const ComponentExample: FC = () => {  return (    <div>      <p>        {t({          en: "This is an example of a component",          fr: "Ceci est un exemple de composant",          es: "Este es un ejemplo de componente",        })}      </p>    </div>  );};

    Traduções Inline em Atributos

    A função t é particularmente útil para traduções inline em atributos JSX. Ao localizar atributos como alt, title, href ou aria-label, você pode usar t diretamente dentro do atributo.

    jsx
    <button  aria-label={t({    en: "Submit",    fr: "Soumettre",    es: "Enviar",  })}>  {t({    en: "Submit",    fr: "Soumettre",    es: "Enviar",  })}  <img    src="/path/to/image"    alt={t({      en: "A beautiful scenery",      fr: "Un beau paysage",      es: "Un hermoso paisaje",    })}  /></button>

    Tópicos Avançados

    Integração com TypeScript

    A função t é segura em termos de tipos quando usada com TypeScript, garantindo que todas as localidades necessárias sejam fornecidas.

    typescript
    import { t, type IConfigLocales } from "react-intlayer";const translations: IConfigLocales<string> = {  en: "Welcome",  fr: "Bienvenue",  es: "Bienvenido",};const greeting = t(translations);

    Detecção de Localidade e Contexto

    No react-intlayer, a localidade atual é gerenciada através do IntlayerProvider. Certifique-se de que este provider envolva seus componentes e que a prop locale seja passada corretamente.

    Exemplo:

    src/app.tsx
    import type { FC } from "react";import type { Locales } from "intlayer";import { IntlayerProvider } from "react-intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => (  <IntlayerProvider locale={locale}>    {/* Seus componentes aqui */}  </IntlayerProvider>);

    Erros Comuns e Solução de Problemas

    t Retorna Undefined ou Tradução Incorreta

    • Causa: O locale atual não está configurado corretamente, ou a tradução para o locale atual está ausente.
    • Solução:
      • Verifique se o IntlayerProvider está configurado corretamente com o locale apropriado.
      • Garanta que seu objeto de traduções inclua todos os locales necessários.

    Traduções Ausentes no TypeScript

    • Causa: O objeto de traduções não satisfaz os locales requeridos, causando erros no TypeScript.
    • Solução: Use o tipo IConfigLocales para garantir a completude das suas traduções.
    typescript
    const translations: IConfigLocales<string> = {  en: "Text",  fr: "Texte",  // es: 'Texto', // A ausência de 'es' causará um erro no TypeScript};const text = t(translations);

    Dicas para Uso Eficaz

    1. Use t para Traduções Simples Inline: Ideal para traduzir pequenos trechos de texto diretamente dentro dos seus componentes.
    2. Prefira useIntlayer para Conteúdo Estruturado: Para traduções mais complexas e reutilização de conteúdo, defina o conteúdo em arquivos de declaração e use useIntlayer.
    3. Fornecimento Consistente de Locale: Garanta que seu locale seja fornecido de forma consistente em toda a sua aplicação através do IntlayerProvider.
    4. Aproveite o TypeScript: Use os tipos do TypeScript para detectar traduções ausentes e garantir a segurança de tipos.

    Conclusão

    A função t no react-intlayer é uma ferramenta poderosa e conveniente para gerenciar traduções inline em suas aplicações React. Ao integrá-la de forma eficaz, você aprimora as capacidades de internacionalização do seu app, proporcionando uma melhor experiência para usuários ao redor do mundo.

    Para um uso mais detalhado e recursos avançados, consulte a documentação do react-intlayer.


    Nota: Lembre-se de configurar corretamente seu IntlayerProvider para garantir que o locale atual seja passado corretamente para seus componentes. Isso é crucial para que a função t retorne as traduções corretas.

    Histórico do Documento

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