# gt-next: General Translation Next.js SDK: InlineTranslationOptions
URL: https://generaltranslation.com/en-GB/docs/next/api/types/inline-translation-options.mdx
---
title: InlineTranslationOptions
description: API reference for the InlineTranslationOptions type
---

## Overview

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

<Callout>
  **Buildtime Translation:**
  Variables are not translated with `useGT`, `getGT`, and `msg`, only the original string.
  See [`tx`](/docs/next/api/strings/tx) for translating strings with dynamic content.
</Callout>

## Reference

### Parameters

<TypeTable
  type={{
  "[variable]?": {
      type: 'any',
      optional: true,
      default: 'undefined',
  },
  "$context?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$id?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
  "$maxChars?": {
      type: 'number',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Description

| Prop         | Description                                                                                                                               |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `[variable]` | Variables are passed as top-level keys in the options object. The key names correspond to placeholders in the string (e.g. `{username}`). |
| `$context`   | Provide context for the content to guide translation.                                                                                     |
| `$id`        | Provide an identifier for use with the translation editor.                                                                                |
| `$maxChars`  | Limit the character count of the translation. The library strictly enforces this limit.                                                   |

***

## Examples

### Context

To add context to a string, use the `$context` prop.

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

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


### Passing variables

To add a variable to the string, use the `{variable-name}` syntax, where curly braces enclose the variable name.

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

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


### Using ICU message format

`gt-next` supports ICU message format, which also lets you format your variables.

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

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-next';

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.
* Variables are passed as top-level keys in the options object, not nested under a `variables` key.

## Next steps

* See [`useGT`](/docs/next/api/strings/use-gt) and [`getGT`](/docs/next/api/strings/get-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.