Variables

Runtime values should stay inside the Message so translators can move them wherever the target Locale needs them.

T component

Use Var inside T to interpolate runtime values without breaking the translatable sentence. The Variable placeholder name is part of the Message.

import { T, Var } from "better-translation/react"

export function Greeting({ name, date }: { name: string; date: string }) {
  return (
    <T>
      Hello <Var name={name} />, the date is <Var date={date} />!
    </T>
  )
}

The prop key becomes the Variable placeholder name. The example above extracts the Message with name and date Variable placeholders and fills the values at render time.

You can also pass the Variable placeholder name explicitly when the value is easier to read as children.

import { T, Var } from "better-translation/react"

export function MessageList({ count }: { count: number }) {
  return (
    <T>
      <Var name="count">{count}</Var> Messages need review
    </T>
  )
}

Var values can be formatted values, not just raw source strings. Keep formatting in the Variable placeholder value when it belongs to the runtime value.

import { T, Var } from "better-translation/react"

export function WelcomeMessage({ name, plan }: { name: string; plan: string }) {
  return (
    <T>
      Welcome <Var name={<b>{name}</b>} /> to the <Var plan={<b>{plan}</b>} /> plan
    </T>
  )
}

The example above extracts Welcome {name} to the {plan} plan. The values are rendered at runtime through the Variable placeholders, so translators can still reorder the sentence.

Plain strings

For non-component strings, use {name} Variable placeholders and pass values as the second argument.

import { useT } from "better-translation/react"

export function MessageSearch({ count }: { count: number }) {
  const t = useT()

  return <input aria-label={t("Search {count} Messages", { count })} placeholder={t("Search Messages")} />
}

When a Message has both values and context, pass context as the third argument.

t("Moved {count} Messages", { count }, { context: "Bulk action toast" })

Use Var only with T. Use {name} Variable placeholders with useT, getT, and the runtime translator.