# 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 de la función de cadena declareVar()
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. Edita la plantilla en content/docs-templates/. */}


## Descripción general

La función `declareVar` es el equivalente para cadenas del componente `<Var>` al trabajar con `derive`.
Marca el contenido dinámico dentro de `derive` que debe excluirse de los cálculos de hash y tratarse como variables en runtime.

```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, en runtime, se resuelve en el valor original.
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 fuente. Usa `decodeVars` para extraer el valor original si lo necesitas para procesar cadenas.
</Callout>


## Referencia

### Parámetros

| Nombre          | Tipo                                                        | Descripción                                                                                                           |
| --------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| `value`         | ` value \| string \| number \| boolean\| undefined \| null` | El valor dinámico que debe marcarse como variable.                                                                    |
| `options?`      | `Object`                                                    | Opciones para la función `declareVar`.                                                                                |
| `options.$name` | `string`                                                    | El nombre de la variable, para proporcionar 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 runtime.

***

## Comportamiento

### Marcado de variables

Cuando `declareVar` envuelve un valor:

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

### Formato ICU

La función devuelve 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: "Hello, Brian! My name is 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 runtime

## Próximos pasos

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