Overview

The <Static> component is used to handle sentence fragmentation and reusable content without sacrificing word agreement, conjugation, and word order changes. In the following example, two separate translations are created: "The beautiful boy plays with the ball" and "The beautiful girl plays with the ball".

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}

<T>
  The beautiful <Static>{getSubject(gender)}</Static> plays with the ball.
</T>

The <Static> component tells the CLI tool to dereference a function call and catalog all possible content being returned by that function, treating every return statement as if it had a <T> component wrapping it.

For more information, see the release notes for gt-next@6.8.0.

Reference

Props

Description

Returns

React.JSX.Element containing the rendered content from the function call, with each possible outcome creating a separate translation entry.

Behavior

Build Time Analysis

During the build process, the CLI tool analyzes functions wrapped in <Static> components and creates separate translation entries for each possible return value. This enables proper grammatical agreement and word order handling across different languages.

Function Requirements

Functions used within <Static> components must return static content that can be determined at build time. The supported syntax includes:

• String, number, and boolean literals
• JSX expressions with nested <Static> and <Var> components
• Ternary operators
• Conditional statements (if/else)
• Calls to other static functions

Examples

Basic Usage

Use <Static> to handle dynamic content that affects sentence structure.

import { T, Static } from 'gt-next';

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}

export default function Example({ gender }) {
  return (
    <T>
      The <Static>{getSubject(gender)}</Static> is beautiful.
    </T>
  );
}

This creates two translation entries:

• "The boy is beautiful"
• "The girl is beautiful"

With Variables

Combine <Static> with <Var> for dynamic content within static function returns.

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

function getGreeting(title) {
  return (
    <>
      Hello, <Static>{getTitle(title)}</Static>. How are you, <Var>{name}</Var>?
    </>
  );
}

export default function Greeting({ title, name }) {
  return (
    <T>
      <Static>{getGreeting(title)}</Static>
    </T>
  );
}

Multiple Static Components

Be careful when using multiple <Static> components as they multiply translation entries.

import { T, Static } from 'gt-next';

function getSubject(gender) { 
  return gender === "male" ? "boy" : "girl" 
}

function getObject(toy) { 
  return toy === "ball" ? "ball" : "crayon"
}

export default function PlayExample({ gender, toy }) {
  return (
    <T>
      <Static>{getSubject(gender)}</Static> plays with the <Static>{getObject(toy)}</Static>.
    </T>
  );
}

This creates four translation entries (2 × 2 combinations):

• "boy plays with the ball"
• "boy plays with the crayon"
• "girl plays with the ball"
• "girl plays with the crayon"

Supported Function Syntax

function getExamples(key) {
  switch (key) {
    case "literals":
      if (condition1) {
        return "The boy"
      } else if (condition2) {
        return 22
      } else {
        return true
      }
    case "jsx":
      return (
        <>
          Hello, <Static>{getTitle(title)}</Static>. How are you, <Var>{name}</Var>?
        </>
      );
    case "ternary":
      return condition ? "The boy" : "The girl"      
    case "function_calls":
      return otherStaticFunction();
  }
}

Limitations

Performance Impact

Using <Static> can create exponential growth in translation entries. Each additional <Static> component multiplies the total number of translations.

Function Constraints

• Functions must be analyzable at build time
• All return paths must be statically determinable
• Dynamic content within function returns must use <Var> components
• Currently only supports function calls as direct children

Variable Content

Any dynamic or variable content within static function returns must be wrapped in <Var> components.

// Correct
function getContent() {
  return <>Hello, <Var>{userName}</Var>!</>;
}

// Incorrect - will cause build errors
function getContent() {
  return <>Hello, {userName}!</>;
}

Notes

• The <Static> component is designed for handling sentence fragmentation while maintaining grammatical accuracy across languages.
• Always consider the performance implications of multiple <Static> components in a single translation.
• Treat every return statement in static functions as if wrapped with a <T> component.
• Use <Static> judiciously - prefer simpler translation structures when possible.

Next Steps

• For variable content within translations, see the <Var> component.
• For the main translation component, see <T>.