# gt-react: General Translation React SDK: declareVar
URL: https://generaltranslation.com/es/docs/react/api/strings/declare-var.mdx
---
title: declareVar
description: Referencia de la API para la función de cadena declareVar()
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita la plantilla en content/docs-templates/. */}


## Resumen

La función `declareVar` es el equivalente en cadena del componente `<Var>` cuando se trabaja con `derive`.
Marca el contenido dinámico dentro del contenido de `derive` que debe excluirse de los cálculos de hash y tratarse como variables en tiempo de ejecución.

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

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

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

`declareVar` envuelve el contenido dinámico en un marcador de posición compatible con ICU que se resuelve en el valor original en tiempo de ejecución.
Si quieres eliminar los marcadores de ICU, puedes usar [`decodeVars`](/docs/react/api/strings/decode-vars).

<Callout>
  **Marcadores de ICU:**
  `declareVar` añade marcadores compatibles con ICU al texto de origen. Usa `decodeVars` para extraer el valor original si lo necesitas para procesar cadenas.
</Callout>


## Referencia

### Parámetros

| Name            | Type                                                        | Description                                                                                                 |
| --------------- | ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| `value`         | ` value \| string \| number \| boolean\| undefined \| null` | El valor dinámico que se marcará como Variable.                                                             |
| `options?`      | `Object`                                                    | Opciones para la función `declareVar`.                                                                      |
| `options.$name` | `string`                                                    | El nombre de la variable, para el contexto de traducción. (Similar a la prop `name` del componente `<Var>`) |

### Devuelve

Una cadena con marcadores compatibles con ICU que conserva el valor original y se resuelve en tiempo de ejecución.

***

## Comportamiento

### Marcado de variables

Cuando `declareVar` envuelve un valor:

1. Convierte el valor al formato de una sentencia `select` de ICU
2. Lo marca como contenido dinámico para su traducción
3. Lo excluye de los cálculos del hash de traducción
4. Conserva el valor original para la interpolación en tiempo de ejecución

### Formato ICU

La función genera cadenas compatibles con ICU MessageFormat:

```jsx
declareVar("John") // → "{_gt_, select, other {John}}"
```

***


## Ejemplo

### Uso básico

Marca el contenido dinámico dentro de funciones estáticas.

```jsx copy
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>;
}
```


### Con otras funciones de ICU

Puedes usar `declareVar` con otras funciones de ICU para crear cadenas más complejas.

```jsx copy
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>;
  // Resultado: "Hola, Brian! Mi nombre es Archie"
}
```

***


## Notas

* Usa `declareVar` solo dentro de funciones llamadas por `derive`
* La función añade marcadores de ICU que pueden interferir con el procesamiento de cadenas
* Usa `decodeVars` para extraer los valores originales cuando sea necesario
* Las variables se excluyen de la traducción y se conservan en tiempo de ejecución

## Próximos pasos

* Consultar [`derive`](/docs/react/api/strings/derive) para crear llamadas a funciones estáticas en cadenas
* Consultar [`decodeVars`](/docs/react/api/strings/decode-vars) para extraer los valores originales
* Consultar [`<Var>`](/docs/react/api/components/var) para ver el equivalente en JSX