Plain string translator
Translate plain strings for attributes like aria-label, placeholder, and title.
Translator function
Use the framework translator function for copy that must be returned as a plain string, such as labels, placeholders, document titles, form errors, and toast messages.
import { useT } from "better-translation/react"
export function SearchBar() {
const t = useT()
return <input aria-label={t("Search Projects")} placeholder={t("Search...")} />
}Svelte component initialization
Call getT() and getMessages() during Svelte component initialization, normally in the component's script. Both helpers read
Svelte context. Keep the returned translator and call it later from markup, handlers, or derived state.
Context
Pass context as the second argument to give translation tools more information about a
plain string. Use it for copy that is short, ambiguous, or needs a specific tone.
t("Archive", { context: "Verb on a button" })Context also disambiguates lookup ids. T, useT, and getT share the same lookup id
behavior, so the same source copy and options resolve to the same Message wherever they
appear.
For Messages with runtime values, see Variables.
Options
Prop
Type
Use id when a plain-string Message needs a lookup id owned by your code.
t("Pay now", { id: "billing.checkout.submit" })