# General Translation React SDKs (gt-react, gt-next, gt-react-native): msg
URL: https://generaltranslation.com/en-US/docs/react/reference/functions/msg.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Register and encode a string for translation at module scope. API reference for msg.

The `msg` function marks and encodes a string for translation. Use it to register strings at module scope — outside a component — then resolve them at runtime with [`useMessages`](/docs/react/reference/hooks/use-messages).

*Available in `gt-react`, `gt-next`, `gt-tanstack-start`, and `gt-react-native`.*

## Overview [#overview]

Call `msg` with a string to get an encoded string. Pass that encoded value to [`useMessages`](/docs/react/reference/hooks/use-messages) to retrieve the translation.

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

*Note: `msg` encodes its input, so you cannot render it directly. To recover the original string, decode it with [`decodeMsg`](/docs/node/reference/functions/decode-msg).*

## How it works [#how-it-works]

- **Registration for extraction.** `msg` marks the string so the CLI can extract it for translation and [`useMessages`](/docs/react/reference/hooks/use-messages) can resolve it at runtime. Without options it returns the string unchanged; with options it returns an encoded string carrying those options.
- **Build-time translation.** In production, registered strings are translated during the build. Missing translations fall back to the original. In development, translation happens on demand with a slight delay.
- **Decoding.** `decodeMsg` extracts the original interpolated string from an encoded message. [`decodeOptions`](/docs/node/reference/functions/decode-options) extracts the options.
- **Arrays.** `msg` also accepts an array of strings; when an `$id` is provided, each entry is given a unique id of `${id}.${index}`.

*Examples import from `gt-react`; import from your framework's package instead.*

```tsx
import { msg, decodeMsg } from 'gt-react';

const encoded = msg('Hello, world!');
const decoded = decodeMsg(encoded);
console.log(decoded); // "Hello, world!"
```

## Parameters [#parameters]

| Parameter | Description | Type | Optional | Default |
| --- | --- | --- | --- | --- |
| [`message`](#message) | The string (or array of strings) to register. | `string \| string[]` | No | — |
| [`options`](#options) | Interpolation variables and options such as `$context` and `$id`. | [`InlineTranslationOptions`](/docs/react/reference/types/inline-translation-options) | Yes | — |

### `message` [#message]

**Type** `string | string[]` · **Required**

The string content to register and encode. An array registers multiple strings at once.

### `options` [#options]

**Type** [`InlineTranslationOptions`](/docs/react/reference/types/inline-translation-options) · **Optional**

Interpolation variables plus options such as `$context`, `$id`, and `$maxChars`. Variables are inserted into the string when it is resolved.

## Returns [#returns]

**Type** `string`

An encoded string, with any interpolated variables applied. For an array input, an array of encoded strings is returned. Resolve the result with [`useMessages`](/docs/react/reference/hooks/use-messages).

## Examples [#examples]

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

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

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

```tsx
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>;
}
// "Alice" is a variable and is not translated.
```

```tsx
import { msg } from 'gt-react';

// Disambiguate with $context
const LABEL = msg('Bank', { $context: 'a bank of a river' });
```

`gt-react` supports [ICU message format](https://unicode-org.github.io/icu/userguide/format_parse/messages/) for formatting variables inside registered strings.

## Notes [#notes]

- `msg` marks strings for translation; translation happens at build time (or on demand in development).
- Resolve encoded strings with [`useMessages`](/docs/react/reference/hooks/use-messages).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.