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

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


## Descripción general

La función `useMessages` es un Hook para traducir cadenas codificadas por `msg` en tiempo de construcción.

```jsx
const m = useMessages();

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

<Callout>
  **Traducción en tiempo de construcción:** las traducciones de `useMessages` se realizan en tiempo de construcción,
  antes de que tu aplicación se implemente. Puedes pasar cadenas codificadas desde `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 por `msg`.

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

| Nombre           | Tipo                  | Descripción                                                        |
| ---------------- | --------------------- | ------------------------------------------------------------------ |
| `encodedContent` | `string`              | El contenido codificado de la cadena de `msg` que se 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 que tu aplicación se despliegue.
Esto garantiza tiempos de carga rápidos en 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 app, 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 aquí](/docs/react-native/tutorials/quickdeploy).

### Desarrollo

Durante el desarrollo, la función `m` traducirá el contenido on-demand.
Esto resulta útil para crear prototipos de cómo se verá tu aplicación en distintos idiomas.
Recuerda añadir 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 esté traduciendo explícitamente on-demand.

***

## Ejemplo

### Uso básico

Puedes usar `useMessages` para traducir cadenas codificadas con `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 que prefiera el 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á "Hello, Bob!" */}
    </p>
  );
}
```


### Las variables de `msg` prevalecen sobre las de `m`

Cuando pasas variables tanto a `msg` como a `m`, las variables que se pasan a `msg` prevalecen sobre 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 al renderizar.


### Uso del formato de mensaje ICU

`gt-react-native` admite el formato de mensaje ICU, que también te permite dar formato a tus 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 mensaje ICU es una forma eficaz de dar formato a las variables. Para más
  información, consulta la [documentación sobre el formato de mensaje
  ICU](https://unicode-org.github.io/icu/userguide/format_parse/messages/).
</Callout>


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

Si usas 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`.
* La traducción de cadenas con `useMessages` se realiza antes del runtime, durante el proceso de compilación (salvo en desarrollo).

## Siguientes pasos

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