# gt-react: General Translation React SDK: InlineTranslationOptions
URL: https://generaltranslation.com/en-US/docs/react/api/types/inline-translation-options.mdx
---
title: InlineTranslationOptions
description: API reference for the InlineTranslationOptions type
---
{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

The `InlineTranslationOptions` type is used to pass variables to inline translations and specify their render behavior.
You can also add context and an identifier to the translation.
It is used with [`useGT`](/docs/react/api/strings/use-gt) and [`msg`](/docs/react/api/strings/msg) to pass variables to inline string translations.

<Callout>
  **Buildtime Translation:**
  `useGT` and `msg` translations occur at buildtime; however, variables are never translated.
  Instead, they are inserted into the translation with formatting.
  Make sure to follow the [deployment guide here](/docs/react/tutorials/quickdeploy).
</Callout>

## Reference

### Parameters

<TypeTable
  type={{
    "variables?": {
        type: 'Record<string, any>',
        optional: true,
        default: 'undefined',
    },
  }}
/>

### Description

| Prop | Description |
| ---- | ----------- |
| `variables` | An object where the keys identify where each value is mapped to in the string.|
| `$context` | Optionally include `$context` as a variable in the `variables` object to provide context for the content (used for translation). |
| `$id` | Optionally include `$id` as a variable in the `variables` object to provide an identifier for use with the translation editor. |
| `$maxChars` | Optionally include `$maxChars` as a variable to limit the character count of the translation. The library strictly enforces this limit using `formatCutoff()` logic. |

---

## Examples

### Context

In order to add context to the string, we use the `$context` prop.

```jsx title="Component.tsx"
// [!code word:$context]
import { useGT } from 'gt-react';

const Component = () => {
  const gt = useGT();
  return <div>{gt('Hello, world!', { $context: 'a formal greeting' })}</div>;
};
```


### Passing variables
In order to add a variable to the string, we use the `{variable-name}` syntax, where curly braces wrap the name of the variable.

```jsx title="Component.tsx"
// [!code word:username]
import { useGT } from 'gt-react';

const Component = () => {
  const gt = useGT();
  return <div>{gt('Hello, {username}! How is your day?', { username: 'Brian123' })}</div>;
};
```

### Using ICU message format

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

```jsx title="Component.tsx"
// [!code word:account-balance]
import { useGT } from 'gt-react';

const Component = () => {
  const gt = useGT();
  return <div>
    { gt(
      'Your account balance: {dollars, number, ::currency/USD}!',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};
```

See the [ICU message format documentation](https://unicode-org.github.io/icu/userguide/format_parse/messages/) for more information on ICU message format.

### Character limits

Use `$maxChars` to limit translation length:

```jsx title="Component.tsx"
// [!code word:$maxChars]
import { useGT } from 'gt-react';

const Component = () => {
  const gt = useGT();
  return <div>{gt('Welcome to our application', { $maxChars: 15 })}</div>; 
  // Output: "Bienvenue à no\u202F…"
};
```

---

## Notes
 * `InlineTranslationOptions` is used for inline string translations.
 * The `variables` object passes values to the text.
 * The `variablesOptions` object defines the behavior of the variables.


## Next steps
 * See [`useGT`](/docs/react/api/strings/use-gt) for more information on inline string translations.
 * See [`ICU message format`](https://unicode-org.github.io/icu/userguide/format_parse/messages/) for more information on formatting options.