O componente <T>

Embrulhe seu conteúdo no componente <T> para traduzi-lo.

<T>This content will be translated</T>

Props

Variáveis

Envolva valores que mudam, como um nome ou uma contagem, em v():

import { T, v } from '@magic-translate/react';

<T>
  Hello {v(user.name)}, you have {v(count)} unread messages
</T>

Magic Translate traduz o texto em torno dos valores uma vez, como Hello {0}, you have {1} unread messages, e coloca os valores de volta no seu aplicativo. A tradução é armazenada em cache e funciona para cada nome e cada contagem, e os valores em si nunca são enviados para Magic Translate.

Os valores são numerados na ordem em que aparecem. A tradução pode movê-los para onde o idioma precisar deles, por exemplo, {1} ungelesene Nachrichten für {0}.

v() também pode conter um componente React, como um link:

<T>
  Read our {v(<Link href="/terms">terms</Link>)} before you continue.
</T>

O texto do link não é traduzido então. Para traduzi-lo também, coloque-o em um <T> próprio: v(<Link href="/terms"><T>terms</T></Link>).

Sem v(), um valor é traduzido junto com o texto ao redor dele. Isso funciona, mas cada valor diferente é uma tradução separada que conta para seu uso.

Limitações

1. Você não pode colocar componentes React dentro do componente <T>, exceto dentro de v(). Elementos HTML simples são bons (veja o exemplo abaixo).
2. O conteúdo dentro de um componente <T> não pode exceder 10 KB, o que equivale a cerca de 5.000 caracteres.

{/* this is OK, since <a> is a plain HTML element */}
<T>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</T>

{/* this does NOT work, since <MyButton> is a React component */}
<T>
  <MyButton>Click me</MyButton>
</T>