# General Translation React SDKs (gt-react, gt-next): Var
URL: https://generaltranslation.com/en-GB/docs/react/reference/components/var.mdx
---

title: Var
description: Render a dynamic value inside a translation without translating it, with General Translation gt-react. API reference for Var.

---

The `<Var>` component renders dynamic content that should not be translated. Use it for values, code snippets, or private information such as API keys or personal data, so the surrounding text remains translatable.

*Available in `gt-react`, `gt-next`, `gt-tanstack-start`, and `gt-react-native`. Examples import from `gt-react`; import from your framework&#39;s package instead.*

## Overview [#overview]

Place `<Var>` inside a [`<T>`](/docs/react/reference/components/t) to mark a value as a variable. The value renders as-is, and the rest of the sentence is translated around it.

```tsx
<T>
  Your name is <Var>{user.name}</Var>.
</T>
```

*Note: `<Var>` is always used inside a `<T>`. Think of it as the catch-all for dynamic values that do not fit [`<Num>`](/docs/react/reference/components/num), [`<Currency>`](/docs/react/reference/components/currency), or [`<DateTime>`](/docs/react/reference/components/datetime).*

## How it works [#how-it-works]

* **Excluded from translation.** The contents of `<Var>` are not sent to the General Translation API. They render exactly as passed, which keeps dynamic or sensitive values intact.
* **Preserves surrounding translation.** Marking a value as a variable allows the surrounding text to remain a single translatable entry, with the variable slotted into the correct position for each locale.

## Props [#props]

| Prop                    | Description                                     | Type        | Optional | Default |
| ----------------------- | ----------------------------------------------- | ----------- | -------- | ------- |
| [`children`](#children) | The value to render, untranslated.              | `ReactNode` | No       | —       |
| [`name`](#name)         | Variable name for the entry, used for metadata. | `string`    | Yes      | —       |

### `children` [#children]

**Type** `ReactNode` · **Required**

The content to render inside the component. It is passed through unchanged and is never translated.

### `name` [#name]

**Type** `string` · **Optional**

An optional name for the variable, used for metadata and to identify the value in the translation entry.

## Examples [#examples]

```tsx title="Address.tsx"
import { T, Var } from 'gt-react';

export default function Example({ user }) {
  return (
    <T>
      Translate this text! Your name is: <Var>{user.name}</Var> // [!code highlight]
      <Var><p>Do not translate this text</p></Var> // [!code highlight]
    </T>
  );
}
```

## Notes [#notes]

* Variable components keep untranslatable, dynamic content out of translations.
* Always use `<Var>` within a `<T>`.
* For locale-aware formatting, use [`<Num>`](/docs/react/reference/components/num), [`<Currency>`](/docs/react/reference/components/currency), or [`<DateTime>`](/docs/react/reference/components/datetime) instead.