Returns the localized string for a given translation key.
The loc source provides localization/translation functionality for your extension. It takes a translation key and optional substitution values, returning the translated string for the current language. Translation keys are defined in your extension's localization files.nSubstitutions allow you to inject dynamic values into translated strings using placeholders.
tecton.sources.loc(key: string, substitutions?: string[] | Record<string, any>, overrideFormatsAndOptions?: Partial<Formats & Options>, options?: Options): string;export interface Formats {
number?: Record<string, Intl.NumberFormatOptions>;
date?: Record<string, Intl.DateTimeFormatOptions>;
time?: Record<string, Intl.DateTimeFormatOptions>;
}export interface Options {
ignoreTag?: boolean;
formatters?: object;
}Simple translation.
tecton.sources.loc('styleGuide.components.q2Loc.greetingExample');
// => "Hello there!"
{
// Translations Dictionary
"styleGuide.components.q2Loc.greetingExample": "Hello there!"
}Translation with pluralization.
tecton.sources.loc(`errorMessage.header`, { errorCount: 1 })
// => "There is one error"
tecton.sources.loc(`errorMessage.header`, { errorCount: 3 })
// => "There are 3 errors"
{
// Translations Dictionary
"errorMessage.header": "There {errorCount, plural, =1 {is one error}, other {are # errors}}"
}Translation with substitutions.
tecton.sources.loc('transfer.confirmation', ['$500', 'Checking', 'Savings']);
// => "Transfer $500 from Checking to Savings?"
{
// Translations Dictionary
"transfer.confirmation": "Transfer {0} from {1} to {2}?"
}Translation with date, time, and number formatting.
tecton.sources.loc(
'tecton.number',
{ value: 1776.67 },
{ number: { options: { style: 'currency', currency: 'USD' } } }
)
// => "The price is: $1,776.67"
tecton.sources.loc(
'tecton.date',
{ value: new Date(Date.UTC(2015, 3, 10, 15, 0, 0)) },
{ date: { options: { dateStyle: 'medium', timeZone: 'UTC' } } }
)
// => "The date is: Apr 10, 2015"
tecton.sources.loc(
'tecton.time',
{ value: new Date(Date.UTC(2015, 3, 10, 15, 0, 0)) },
{ time: { options: { timeStyle: 'medium', timeZone: 'UTC' } } }
)
// => "The time is: 3:00:00 PM"
{
// Translations Dictionary
"tecton.number": "The price is: {value, number, options}",
"tecton.date": "The date is: {value, date, options}",
"tecton.time": "The time is: {value, time, options}"
}When using the loc source, there are important details to keep in mind.
The loc source relies on translation dictionaries to provide your localized strings. There are a couple of different ways to set up these dictionaries depending on how you are using Tecton. For more information on setting up translation dictionaries, see our guide on Translation & Localization.
The loc source uses the built-in JavaScript Intl constructors (Intl.NumberFormat, Intl.DateTimeFormat, and Intl.DateTimeFormat) for formatting numbers, dates, and times. The options object for each format type takes any of the properties that are exposed in their respective APIs:
A popular web component variant which renders the translated text is also available. This component can be used in your extension's frontend code to display localized strings directly in the UI. For more information, see our guide on the q2-loc component.
keysubstitutionsoverrideFormatsAndOptionsoptions.ignoreTagoptions.formattersThere is 1 frequently asked question related to this page.