# gt-react: General Translation React SDK: useMessages
URL: https://generaltranslation.com/en-GB/docs/react/api/strings/use-messages.mdx
---
title: useMessages
description: API reference for the useMessages() string translation function
---

{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

The `useMessages` function is a hook for translating encoded strings from `msg` at build time.

```jsx
const m = useMessages();

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

<Callout>
  **Build-time Translation:** `useMessages` translations occur at build time,
  before your app is deployed. You can pass encoded strings from `msg`, and they will
  be translated into the user&#39;s preferred language.
</Callout>


## Reference

### Parameters

None

### Returns

A callback function, `m`, which translates the provided encoded content from `msg`.

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

| Name             | Type                  | Description                                                  |
| ---------------- | --------------------- | ------------------------------------------------------------ |
| `encodedContent` | `string`              | The encoded string content from `msg` to be translated.      |
| `options?`       | `Record<string, any>` | Optional parameters to pass variables to the encoded string. |

***


## Behaviour

### Production

During the CD process, any content inside a `msg` function will be translated before your application is deployed.
This ensures fast load times for all locales, but it can only translate content known at build time.

Once generated, translations are either (1) stored in the CDN or (2) stored in your app&#39;s build output, depending on your configuration.
From there, the translated content is served to your users.
If a translation is not found, it will fall back to the original content.

Make sure to follow the [deployment guide here](/docs/react/tutorials/quickdeploy).

### Development

During development, the `m` function will translate content on-demand.
This is useful for prototyping what your app will look like in different languages.
Remember to add a Dev API key to your environment to enable this behaviour.

You will see a delay during on-demand translation in development.
This will not occur in production builds unless content is explicitly being translated on-demand.

***

## Example

### Basic usage

You can use `useMessages` to translate encoded strings from `msg`.

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

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

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

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

Note: &quot;Alice&quot; will be translated to the user&#39;s preferred language.


### Using variables [#variables]

You can pass variables into encoded strings.

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

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

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

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}{' '}
      {/* This will display "Hello, Bob!" */}
    </p>
  );
}
```


### `msg` variables override `m` variables

When you pass variables to both `msg` and `m`, the variables passed to `msg` override those passed to `m`.

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

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

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

Note: This will display &quot;Hello, Alice!&quot; - the variable is not overridden at render time.


### Using ICU message format

`gt-react` supports ICU message format, which also allows you to format your variables.

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

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>
  ICU message format is a powerful way to format your variables. For more
  information, see the [ICU message format
  documentation](https://unicode-org.github.io/icu/userguide/format_parse/messages/).
</Callout>


### Importing from `gt-react`

If operating under the `"use client"` directive, you should import from `gt-react` rather than `gt-react`.

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

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

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

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

***


## Notes

* The `useMessages` function is a Hook that translates encoded strings from `msg`.
* String translation with `useMessages` happens before runtime, during the build process (unless in development).

## Next steps

* See [`msg`](/docs/react/api/strings/msg) for encoding strings for translation.