<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 or in a dictionary entry. 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.
`name`	Optional name for the variable, used for a dictionary design implementation.
`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 or in a dictionary entry.

Address.jsx

import { T, Var } from 'gt-next'
 
export default function Address(user) {
  return (
    <T id='address'>
      <Var>{user.name}</Var>&apos;s current address is:
      <Var>{user.address}</Var>
    </T>
  );
}

Dictionary examples

<Var> can also be used in dictionaries as well.

Basic example

In this example ,"Alice" and "123 Fake Street", unlike the rest of the words in the sentence, will never be translated because they are wrapped in <Var> components.

dictionary.jsx

const dictionary = {
  address: <>
    <Var>Alice</Var>'s current address is: <Var>123 Fake Street</Var>
  </>,
}
export default dictionary;

Address.jsx

import { useGT } from 'gt-next'
 
export default function Address() {
  const { t } = useGT();
  return (
    <div>
      {t('address')}
    </div>
  );
}

Passing values to dictionary entries

If you want to pass values to the dictionary entry, you must specify a name for the <Var> component and reference it when calling the t() function.

dictionary.jsx

const dictionary = {
  address: <>
    <Var name='name'/>'s current address is: <Var name='address'/>
  </>,
}
export default dictionary;

Address.jsx

import { useGT } from 'gt-next'
 
export default function Address(user) {
  const { t } = useGT();
  return (
    <div>
      {t('address', { name: user.name, address: user.address })}
    </div>
  );
}

Notes

Variable Components are essential for maintaining untranslatable, dynamic content in translations.
Always use Variable Components within a <T> component or template dictionary entry.
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