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

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


## Resumen

La función `msg` marca y codifica cadenas para su traducción.

```jsx
const encodedString = msg('Hello, world!');
```

La cadena codificada debe pasarse al hook [`useMessages`](/docs/react/api/strings/use-messages) para obtener las traducciones.

<Callout>
  **Codificación:**
  `msg` codifica la cadena de entrada, por lo que no puedes usarla directamente en JSX ni en ningún otro lugar.
  Si quieres recuperar la cadena original, debes decodificarla con [`decodeMsg`](#decodemsg)
</Callout>


## Decodificación [#decodemsg]

Para recuperar la cadena original, debes decodificarla con [`decodeMsg`](#decodemsg)

```jsx
import { msg, decodeMsg } from 'gt-react';
const encodedString = msg('Hello, world!');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // "Hello, world!"
```


## Referencia

### Parámetros

| Name       | Type                                                                           | Description                                                          |
| ---------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------- |
| `content`  | `string`                                                                       | La cadena de contenido que se codificará.                            |
| `options?` | [`InlineTranslationOptions`](/docs/react/api/types/inline-translation-options) | Opciones de traducción para personalizar el comportamiento de `msg`. |

### Devuelve

Una cadena codificada en la que las variables interpoladas (si las hay) se sustituyen por sus valores.

***

## Comportamiento

### Producción

Durante el proceso de CD, cualquier contenido dentro de una función `msg` se traducirá antes de desplegar tu aplicación.
Esto garantiza tiempos de carga rápidos para todas las configuraciones regionales, pero solo puede traducir contenido conocido en tiempo de construcción.

Una vez generadas, las traducciones se almacenan (1) en la CDN o (2) en la salida de compilación de tu aplicación, según tu configuración.
A partir de ahí, el contenido traducido se sirve a tus usuarios.
Si no se encuentra una traducción, se usará el contenido original.

Asegúrate de seguir la [guía de despliegue disponible aquí](/docs/react/tutorials/quickdeploy).

### Desarrollo

Durante el desarrollo, la función `msg` traducirá el contenido on-demand.
Esto resulta útil para crear prototipos de cómo se verá tu aplicación en distintos idiomas.
Recuerda agregar una API key de desarrollo a tu entorno para habilitar este comportamiento.

Verás una demora durante la traducción on-demand en desarrollo.
Esto no ocurrirá en las compilaciones de producción, a menos que el contenido se traduzca explícitamente on-demand.

***

## Ejemplo

### Uso básico

Puedes usar `msg` para marcar cadenas para su traducción.

```jsx copy
import { msg, useMessages } from 'gt-react';

const encodedString = msg('Hello, world!');

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedString)}
    </p>
  );
}
```

Nota: &quot;¡Hola, mundo!&quot; se traducirá al idioma que prefiera el usuario.


### Uso de variables [#variables]

Puedes pasar variables a las traducciones del diccionario.

```jsx copy
import { msg, useMessages } from 'gt-react';

const encodedString = msg('Hello, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedString)}
    </p>
  );
}
```

Nota: &quot;Alice&quot; no se traducirá al idioma preferido del usuario, ya que es una variable.


### Uso del formato de mensajes ICU

`gt-react` admite el formato de mensajes ICU, que también permite formatear las variables.

```jsx copy
import { msg, useMessages } from 'gt-react';

const encodedString = msg('There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart', { count: 10 });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedString)}
    </p>
  );
}
```

<Callout>
  El formato de mensajes ICU es una forma potente de aplicar formato a las variables.
  Para obtener más información, consulta la [documentación del formato de mensajes ICU](https://unicode-org.github.io/icu/userguide/format_parse/messages/).
</Callout>

***


## Notas

* La función `msg` marca cadenas para su traducción.
* La traducción de cadenas con `msg` se realiza antes del runtime, durante el proceso de compilación (salvo en desarrollo).

## Siguientes pasos

* Consulta [`useMessages`](/docs/react/api/strings/use-messages) para traducir cadenas.