# The \<T> component

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

```jsx
<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)

<pre class="language-jsx"><code class="lang-jsx"><strong>{/* this is ok, since &#x3C;a> is a plain HTML tag */}
</strong>&#x3C;T>
    &#x3C;a href="mailto:info@i42.ch">Please send us an email&#x3C;/a>
&#x3C;/T>

{/* this will NOT work, since &#x3C;MyButton> is a React component */}
&#x3C;T>
    &#x3C;MyButton>Click me&#x3C;/MyButton>
&#x3C;/T>
</code></pre>