Overview

The declareVar function is the string equivalent of the <Var> component when working with declareStatic. It marks dynamic content within declareStatic content that should be excluded from hash calculations and handled as variables at runtime.

function Component() {
  function getGreeting(name) {
    return "Hello, " + declareVar(name);
  }
  // Results in: "Hello, {_gt_, select, other {Brian}}"

  gt(`${declareStatic(getGreeting(name))}. How are you?`);
  // Results in: "Hello, Brian. How are you?"

  return <p>{message}</p>;
}

declareVar wraps dynamic content in an ICU-compatible placeholder that resolves to the original value at runtime. If you want to remove the ICU markers, you can use decodeVars.

Reference

Parameters

Returns

A string containing ICU-compatible markers that preserves the original value and is resolved at runtime.

Behavior

Variable Marking

When declareVar wraps a value, it:

1. Converts the value to an ICU select statement format
2. Marks it as dynamic content for translation processing
3. Excludes it from translation hash calculations
4. Preserves the original value for runtime interpolation

ICU Format

The function outputs ICU MessageFormat compatible strings:

declareVar("John") // → "{_gt_, select, other {John}}"

Example

Basic Usage

Mark dynamic content within static functions.

import { declareStatic, declareVar, gt } from 'gt-next';

function getGreeting(name) {
  return `Hello, ${declareVar(name)}!`;
}

function Component() {
  const name = "Brian";
  const message = gt(`${declareStatic(getGreeting(name))} Welcome back.`);
  return <p>{message}</p>;
}

With Other ICU Functions

You can use declareVar with other ICU functions to create more complex strings.

import { declareVar, declareStatic, useGT } from 'gt-next';

function Component({ name1, name2 }) {
  const gt = useGT();
  const message = gt("Hello, {name1}! My name is " + declareStatic(declareVar(name2)), { name1 });
  return <p>{message}</p>;
  // Results in: "Hello, Brian! My name is Archie"
}

Notes

• Use declareVar only within functions called by declareStatic
• The function adds ICU markers that may interfere with string processing
• Use decodeVars to extract original values when needed
• Variables are excluded from translation and preserved at runtime

Next steps

• See declareStatic for creating static function calls in strings
• See decodeVars for extracting original values
• See <Var> for the JSX equivalent