# General Translation React SDKs (gt-react, gt-next): declareVar
URL: https://generaltranslation.com/en-US/docs/react/reference/functions/declare-var.mdx
---

title: declareVar
description: Mark a non-translatable variable inside derived content with General Translation gt-react. API reference for declareVar.

---

The `declareVar` function marks dynamic content inside [`derive`](/docs/react/reference/functions/derive) content that should be excluded from translation and handled as a variable at runtime. It is the string equivalent of the [`<Var>`](/docs/react/reference/components/var) component.

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

## Overview [#overview]

Wrap a dynamic value inside a function that `derive` analyzes. `declareVar` wraps it in an ICU-compatible placeholder that resolves to the original value at runtime.

```tsx
function getGreeting(name) {
  return 'Hello, ' + declareVar(name);
  // "Hello, {_gt_, select, other {Brian}}"
}

gt(`${derive(getGreeting(name))}. How are you?`);
// "Hello, Brian. How are you?"
```

*Note: use `declareVar` only within functions called by [`derive`](/docs/react/reference/functions/derive). To remove the ICU markers for string processing, use [`decodeVars`](/docs/react/reference/functions/decode-vars).*

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

When `declareVar` wraps a value, it:

1. Converts the value to an ICU `select` statement format.
2. Marks it as dynamic content for translation processing.
3. Excludes it from translation hash calculations.
4. Preserves the original value for runtime interpolation.

The output is an ICU MessageFormat-compatible string:

```tsx
declareVar('John'); // → "{_gt_, select, other {John}}"
```

## Parameters [#parameters]

| Parameter | Description | Type | Optional | Default |
| --- | --- | --- | --- | --- |
| [`variable`](#variable) | The dynamic value to mark as a variable. | `string \| number \| boolean \| null \| undefined` | No | — |
| [`options`](#options) | Options such as `$name`. | `object` | Yes | — |

### `variable` [#variable]

**Type** `string | number | boolean | null | undefined` · **Required**

The dynamic value to mark as a variable.

### `options` [#options]

**Type** `object` · **Optional**

Options for the variable. `options.$name` (`string`) sets the variable name for translation context, similar to the `name` prop on [`<Var>`](/docs/react/reference/components/var).

## Returns [#returns]

**Type** `string`

A string containing ICU-compatible markers that preserves the original value and resolves it at runtime.

## Examples [#examples]

```tsx title="BasicUsage.tsx"
import { derive, declareVar, gt } from 'gt-react';

function getGreeting(name) {
  return `Hello, ${declareVar(name)}!`;
}

function Component() {
  const name = 'Brian';
  const message = gt(`${derive(getGreeting(name))} Welcome back.`);
  return <p>{message}</p>;
}
```

```tsx title="WithOtherFunctions.tsx"
import { declareVar, derive, useGT } from 'gt-react';

function Component({ name1, name2 }) {
  const gt = useGT();
  const message = gt('Hello, {name1}! My name is ' + derive(declareVar(name2)), { name1 });
  return <p>{message}</p>;
  // "Hello, Brian! My name is Archie"
}
```

## Notes [#notes]

- Use `declareVar` only within functions called by [`derive`](/docs/react/reference/functions/derive).
- It adds ICU markers that may interfere with string processing; use [`decodeVars`](/docs/react/reference/functions/decode-vars) to extract original values when needed.
- Variables are excluded from translation and preserved at runtime.
- For the JSX form, see the [`<Var>`](/docs/react/reference/components/var) component.