The <T> component

Translating your content with the <T> React component

Using the <T> component could not be easier. Simply wrap your content in it, and the content will be translated:

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

Props

prop
type
description

formality

'informal' | 'formal'

Sets the formality of the translation.

lang

Language

Override the language (the language set on the `MagicTranslateProvider`)

Limitations when using the <T> component

There are very few limitations:

  1. You can not have any React components inside of the <T> component. It's OK to have plain HTML nodes though (see example below)

  2. The content inside the <T> component cannot exceed 10kb (that's about 5000 characters)

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

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

Last updated