Back

gt-react@10.15.0

Ernest McCarter avatarErnest McCarter
gt-reactderivetagged-templatei18n

Overview

This release builds on gt-react's move away from React context and the t tagged template macro. derive() now works inside the t tagged template literal. Previously, derive() could only be used inside t() function calls:

t("The {subject} is playing.", { subject: derive(getSubject(gender)) })

Now you can write it directly in a template literal:

t`The ${derive(getSubject(gender))} is playing.`

How it works

derive() tells the CLI tool to analyze all possible return values of a function and create a separate translation entry for each one. This preserves grammatical agreement across languages — for example, in Spanish, "The boy is playing" and "The girl is playing" require different articles (El niño vs La niña).

Example

import { t } from "gt-react/browser";
import { derive } from "gt-react";

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

function Component({ gender }) {
  return <p>{t`The ${derive(getSubject(gender))} is playing.`}</p>;
}

This creates two translation entries:

  • "The boy is playing."
  • "The girl is playing."