The <T> component

Wrap your content in the <T> component to translate it.

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

Props

Variables

Wrap values that change, such as a name or a count, in v():

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

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

Magic Translate translates the text around the values once, as Hello {0}, you have {1} unread messages, and puts the values back in your app. The translation is cached and works for every name and every count, and the values themselves are never sent to Magic Translate.

The values are numbered in the order they appear. The translation can move them wherever the language needs them, for example {1} ungelesene Nachrichten für {0}.

v() can also hold a React component, such as a link:

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

The link text is not translated then. To translate it too, put it in a <T> of its own: v(<Link href="/terms"><T>terms</T></Link>).

Without v(), a value is translated together with the text around it. That works, but every different value is a separate translation that counts toward your usage.

Limitations

1. You cannot put React components inside the <T> component, except inside v(). Plain HTML elements are fine (see the example below).
2. The content inside a <T> component cannot exceed 10 KB, which is about 5,000 characters.

{/* 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>