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

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


## Overview

The `msg` function marks and encodes strings for translation.

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

The encoded string should be passed to the [`useMessages`](/docs/react/api/strings/use-messages) hook to retrieve translations.

<Callout>
  **Encoding:**
  `msg` encodes the input string, so you cannot use it directly in JSX or elsewhere.
  If you want to recover the original string, you need to decode it with [`decodeMsg`](#decodemsg)
</Callout>


## Decoding [#decodemsg]

To get the original string back, you need to decode it with [`decodeMsg`](#decodemsg)

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


## Reference

### Parameters

| Name       | Type                                                                           | Description                                              |
| ---------- | ------------------------------------------------------------------------------ | -------------------------------------------------------- |
| `content`  | `string`                                                                       | The string to be encoded.                                |
| `options?` | [`InlineTranslationOptions`](/docs/react/api/types/inline-translation-options) | Translation options to customise the behaviour of `msg`. |

### Returns

An encoded string, with interpolated variables (if any) replaced with their values.

***

## 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, according to 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 `msg` function will translate content on demand.
This is useful for prototyping how your app will look 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 `msg` to mark strings for translation.

```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>
  );
}
```

Note: &quot;Hello, world!&quot; will be translated to the user&#39;s preferred language.


### Using variables [#variables]

You can pass variables to dictionary translations.

```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>
  );
}
```

Note: &quot;Alice&quot; will not be translated into the user&#39;s preferred language because it is a variable.


### 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 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>
  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>

***


## Notes

* The `msg` function marks strings for translation.
* Translating strings with `msg` happens before runtime, during the build process (unless in development).

## Next steps

* See [`useMessages`](/docs/react/api/strings/use-messages) for translating strings.