> For the complete documentation index, see [llms.txt](https://react.i18next.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://react.i18next.com/latest/icu-trans-component.md).
# IcuTrans Component
IcuTrans, the Trans variant for ICU message format (i18next-icu): nest React components in an ICU message, the props reference and Server Component usage.
## Important note
`IcuTrans` is the [`Trans`](/latest/trans-component.md) counterpart for the [ICU message format](/misc/using-with-icu-format.md). Use it when your i18next instance uses [i18next-icu](https://github.com/i18next/i18next-icu) and a translation contains React elements (text formatting like `strong`, `em`, link components) that belong to one cohesive sentence.
`Trans` builds its default string from JSX children, and JSX reserves `{curly brackets}` for expressions, so ICU syntax like `{count, plural, ...}` cannot be written there. `IcuTrans` takes the message as a plain string instead (`defaultTranslation`) and a list of component declarations (`content`) that replace the numbered tags `<0>`, `<1>`, ... in it.
**As long as you have no React/HTML nodes integrated into a cohesive sentence, you won't need it**: most of the time you will be using the good old `t` function.
{% hint style="info" %}
`IcuTrans` replaces the deprecated [`icu.macro` Babel macro](/misc/using-with-icu-format.md#using-babel-macros-trans-plural-select-deprecated), which compiled JSX into `IcuTrans` elements. Write `IcuTrans` directly instead.
{% endhint %}
[IcuTrans props reference](#icutrans-props).
{% hint style="warning" %}
IcuTrans does ONLY interpolation. It does not rerender on language change or load any translations needed. Use [`useTranslation` hook](/latest/usetranslation-hook.md) or [`withTranslation` HOC](/latest/withtranslation-hoc.md) with `IcuTrans` to force a re-render on language changes.
{% endhint %}
```javascript
import React from 'react';
import { IcuTrans, useTranslation } from 'react-i18next';
function MyComponent() {
// this will force a re-render when language changes or translation files are loaded
const { t } = useTranslation('myNamespace');
return ;
}
```
{% hint style="info" %}
Have a look at the [i18next-icu](https://github.com/i18next/i18next-icu) README and the [ICU message format reference](https://formatjs.github.io/docs/core-concepts/icu-syntax) for the message syntax (arguments, `plural`, `select`, `selectordinal`, number and date formats).
{% endhint %}
## Samples
### Using with React components
This component enables you to nest any React content to be translated as one cohesive string. Plurals, selects and formatting go into the ICU message itself. `IcuTrans` uses the most relevant `t()` function (from the [context instance](/latest/i18nextprovider.md) or the global instance), unless overridden via the `i18n` or `t` props.
*Let's say you want to create following HTML output:*
> Hello **Arthur**, you have 42 unread messages. [Go to messages](/latest/icu-trans-component.md).
**Before:** Your untranslated React code would have looked something like:
```javascript
function MyComponent({ person, messages }) {
const { name } = person;
const count = messages.length;
return (
<>
Hello {name}, you have {count} unread message(s). Go to messages.
);
}
```
**After:** With the IcuTrans component change it to:
{% tabs %}
{% tab title="JavaScript" %}
```jsx
import { IcuTrans, useTranslation } from 'react-i18next';
function MyComponent({ person, messages }) {
const { t } = useTranslation();
const { name } = person;
const count = messages.length;
return (
);
}
```
{% endtab %}
{% tab title="TypeScript" %}
```tsx
import { IcuTrans, useTranslation } from 'react-i18next';
function MyComponent({ person, messages }) {
const { t } = useTranslation();
const { name } = person;
const count = messages.length;
return (
$.nameTitle) } },
{ type: Link, props: { to: '/msgs' } },
]}
t={t}
/>
);
}
```
{% endtab %}
{% endtabs %}
*Your en.json (translation strings) will look like:*
```json
{
"nameTitle": "This is your name",
"userMessagesUnread": "Hello <0>{name}, you have {count, plural, one {# unread message} other {# unread messages}}. <1>Go to messages."
}
```
*Result with `count = 42`:*
```html
Hello Arthur, you have 42 unread messages. Go to messages.
```
The index of a declaration in `content` is the number of its tag: `content[0]` replaces `<0>...`, `content[1]` replaces `<1>...`. The text between the tags becomes the children of that element. There is one key per message: the plural forms live inside the ICU message, not in `_one`/`_other` suffixed keys.
### Nested elements
Declarations can have their own children declarations. Tags inside a tag are numbered again from `0` and refer to `props.children` of the outer declaration:
```jsx
// result
Features: