# react-native: useMessages
URL: https://generaltranslation.com/es/docs/react-native/api/strings/use-messages.mdx
---
title: useMessages
description: Referencia de la API para la función de traducción de cadenas useMessages()
---

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


## Resumen

La función `useMessages` es un hook que sirve para traducir cadenas codificadas de `msg` en tiempo de compilación.

```jsx
const m = useMessages();

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

<Callout>
  **Traducción en tiempo de compilación:** las traducciones de `useMessages` se realizan en tiempo de compilación,
  antes de desplegar tu aplicación. Puedes pasar cadenas codificadas de `msg` y se
  traducirán al idioma preferido del usuario.
</Callout>

## Referencia

### Parámetros

Ninguno

### Devuelve

Una función callback, `m`, que traduce el contenido codificado proporcionado de `msg`.

```jsx
(encodedContent: string, options?: Record<string, any>) => string
```

| Nombre           | Tipo                  | Descripción                                                        |
| ---------------- | --------------------- | ------------------------------------------------------------------ |
| `encodedContent` | `string`              | La cadena codificada de `msg` que se va a traducir.                |
| `options?`       | `Record<string, any>` | Parámetros opcionales para pasar variables a la cadena codificada. |

***


## 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 todos los locales, pero solo puede traducir contenido conocido en tiempo de compilació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 entrega a tus usuarios.
Si no se encuentra una traducción, se usará el contenido original como alternativa.

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

### Desarrollo

Durante el desarrollo, la función `m` traducirá el contenido bajo demanda.
Esto es útil para crear prototipos de cómo se verá tu aplicación en diferentes idiomas.
Recuerda añadir una clave API de desarrollo a tu entorno para habilitar este comportamiento.

Verás un retraso durante la traducción bajo demanda en desarrollo.
Esto no ocurrirá en las compilaciones de producción, a menos que el contenido se esté traduciendo explícitamente bajo demanda.

***

## Ejemplo

### Uso básico

Puedes usar `useMessages` para traducir cadenas codificadas de `msg`.

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

const encodedGreeting = msg('Hello, Alice!');

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

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

Nota: &quot;Alice&quot; se traducirá al idioma preferido del usuario.

### Uso de variables [#variables]

Puedes pasar variables a las cadenas codificadas.

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

const encodedGreeting = msg('Hello, {name}!');

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

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}{' '}
      {/* Esto mostrará "Hola, Bob!" */}
    </p>
  );
}
```


### Las variables de `msg` sobrescriben las de `m`

Cuando pasas variables tanto a `msg` como a `m`, las variables que se pasan a `msg` sobrescriben las que se pasan a `m`.

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

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

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedGreeting, { name: 'Bob' })}</p>;
}
```

Nota: Esto mostrará &quot;Hola, Alice!&quot; - la variable no se sobrescribe durante el renderizado.

### Uso del formato de mensajes ICU

`gt-react-native` admite el formato de mensajes ICU, lo que también te permite dar formato a las variables.

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

const encodedMessage = 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(encodedMessage)}</p>;
}
```

<Callout>
  El formato de mensajes ICU es una forma eficaz de dar formato a tus 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>


### Importar desde `gt-react-native`

Si estás usando la directiva `"use client"`, debes importar desde `gt-react-native` en lugar de `gt-react-native`.

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

const encodedGreeting = msg('Hello, Alice!');

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

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

***


## Notas

* La función `useMessages` es un hook que traduce cadenas codificadas de `msg`.
* Las traducciones de cadenas con `useMessages` se realizan antes del tiempo de ejecución, durante el proceso de compilación (salvo en desarrollo).

## Próximos pasos

* Consulta [`msg`](/docs/react-native/api/strings/msg) para codificar cadena para su traducción.