<Var>

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 of a <T> component. Think of it as a catch all for dynamic values that do not fit in to the category of <Currency>, <DateTime>, or <Num>.

Reference

Props

Prop	Type	Default
`children?`	`JSX.Element`	`undefined`
`name?`	`string`	`undefined`
`value?`	`string`	`undefined`

Description

Prop	Description
`children`	The content to render inside the component. If provided, it will take precedence over value.
`value`	Optional default value to be displayed if children is not provided. Can be a string.

Returns

JSX.Element containing the content that should not be translated.

Examples

Basic example

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

Example.jsx

import { T, Var } from 'gt-next'
 
export default function Example(user) {
  return (
    <T>
      Translate this text!
      Your name is: <Var>{user.name}</Var>
      <Var><p>Do not translate this text</p></Var>
    </T>
  );
}

Notes

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

Next Steps

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

<Var>

On this page