Overview

The <Var> component is used to render content that should not be translated. This is useful for rendering variables, code snippets, or other content that should not be translated. Additionally, this is useful for rendering content that should be kept private, such as API keys or personal information.

<Var>{user.name}</Var>

The <Var> component is always used inside a <T> component. Think of it as a catch‑all for dynamic values that do not fit into the category of <Currency>, <DateTime>, or <Num>.

Reference

Props

Description

Returns

JSX.Element containing content that should not be translated.

Examples

Basic example

The <Var> component must be used inside a <T> component.

import { T, Var } from 'gt-next'

export default function Example(user) {
  return (
    <T>
      Translate this text!
      Your name is: <Var>{user.name}</Var> // [!code highlight]
      <Var><p>Do not translate this text</p></Var> // [!code highlight]
    </T>
  );
}

Notes

• Variable Components are essential for preserving untranslatable, dynamic content in translations.
• Always use Variable Components within a <T> component.
• Components like <Num>, <Currency>, and <DateTime> provide localisation features to ensure accurate formatting.

Next Steps

• For a more in-depth discussion and usage examples of the <Var> component and other variable components such as <Currency>, <DateTime>, and <Num>, see the Using Variable Components documentation.
• Learn more about formatting options for specific variable components in the API Reference.