# gt-react: General Translation React SDK: declareVar
URL: https://generaltranslation.com/en-US/docs/react/api/strings/declare-var.mdx
---
title: declareVar
description: API reference for the declareVar() string function
---
{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

The `declareVar` function is the string equivalent of the `<Var>` component when working with `declareStatic`.
It marks dynamic content within `declareStatic` content that should be excluded from hash calculations and handled as variables at runtime.

```jsx
function Component() {
  function getGreeting(name) {
    return "Hello, " + declareVar(name);
  }
  // Results in: "Hello, {_gt_, select, other {Brian}}"

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

  return <p>{message}</p>;
}
```

`declareVar` wraps dynamic content in an ICU-compatible placeholder that resolves to the original value at runtime.
If you want to remove the ICU markers, you can use [`decodeVars`](/docs/react/api/strings/decode-vars).

<Callout>
**ICU Markers:**
`declareVar` adds ICU-compatible markers to source text. Use `decodeVars` to extract the original value if needed for string processing.
</Callout>

## Reference
### Parameters

| Name                  | Type | Description                                                                 |
|-----------------------|--|-----------------------------------------------------------------------------|
| `value`               | ` value \| string \| number \| boolean\| undefined \| null` | The dynamic value to be marked as a variable.                             |
| `options?`            | `Object` | Options for the `declareVar` function.                                     |
| `options.$name`       | `string` | The name of the variable, for translation context. (Similar to the `name` prop in the `<Var>` component) |

### Returns

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

---

## Behavior

### Variable marking
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

### ICU format
The function outputs ICU MessageFormat compatible strings:
```jsx
declareVar("John") // → "{_gt_, select, other {John}}"
```

---

## Example

### Basic usage
Mark dynamic content within static functions.

```jsx copy
import { declareStatic, declareVar, gt } from 'gt-react';

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

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

### With other ICU functions
You can use `declareVar` with other ICU functions to create more complex strings.

```jsx copy
import { declareVar, declareStatic, useGT } from 'gt-react';

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

---

## Notes
* Use `declareVar` only within functions called by `declareStatic`
* The function adds ICU markers that may interfere with string processing
* Use `decodeVars` to extract original values when needed
* Variables are excluded from translation and preserved at runtime

## Next steps
* See [`declareStatic`](/docs/react/api/strings/declare-static) for creating static function calls in strings
* See [`decodeVars`](/docs/react/api/strings/decode-vars) for extracting original values
* See [`<Var>`](/docs/react/api/components/var) for the JSX equivalent