i18n

The elements produce strings of their own: validation messages, the accessible names of buttons with no visible text, and announcements such as a count of selected items. They are in English by default. Your app’s text, such as labels and hints, is whatever you pass in.

Plug in your i18n library

Pass a translate function to configureMessages once, when your app starts:

import { configureMessages } from '@golemui/gui-components';

configureMessages((key, defaultText, params) =>
  i18next.t(`ui.${key}`, { defaultValue: defaultText, ...params }),
);

The function receives:

Argument	What it is
key	The string’s key, such as valueMissing or showCalendar.
defaultText	Its English default, with the runtime values still as {tokens}.
params	The runtime values, such as { min: 3 } or { count: 2 }.

Return the translated string, or undefined or null to keep the English default. Any {token} left in your result is filled in from params.

Call configureMessages again when the language changes: every element on the page renders again with the new strings. configureMessages(null) restores the English defaults.

The keys

DEFAULT_MESSAGES lists every key with its English default. The keys are public API, so you can use them in your translation files:

import { DEFAULT_MESSAGES } from '@golemui/gui-components';

Runtime values are {tokens} in single braces, such as {min}, {name} and {count}, which keeps them clear of the {{…}} interpolation of most i18n libraries.

To start a translation, download golemui-messages.en.json, every key with its English default, and translate the values. A string with plural forms is an object with one entry per plural category, such as one and other; see Plurals.

All the keys

Key	English default
valueMissing	Please fill out this field.
rangeUnderflow	Value must be greater than or equal to {min}.
rangeOverflow	Value must be less than or equal to {max}.
invalidDate	Invalid date: day is greater than the maximum valid day for the month and year.
minDate	Invalid date: date is before the minimum allowed date.
maxDate	Invalid date: date is after the maximum allowed date.
disabledDateRange	Invalid date: date is within a disabled range.
minTime	Invalid time: time is before the minimum allowed time.
maxTime	Invalid time: time is after the maximum allowed time.
timeRangeOrder	Invalid range: end time must be after start time.
disabledTimeRange	Invalid time: time is within a disabled range.
minDateTime	Invalid date-time: date-time is before the minimum allowed date-time.
maxDateTime	Invalid date-time: date-time is after the maximum allowed date-time.
incompleteDate	Incomplete date: fill in all date parts.
incompleteTime	Incomplete time: fill in all time parts.
incompleteDateTime	Incomplete date-time: fill in all date and time parts.
noAvailableTimes	No available times
invalidOption	Invalid selection: '{value}' is not a valid option.
day	Day
month	Month
year	Year
hour	Hour
minute	Minute
second	Second
dayPeriod	AM/PM
calendar	Calendar
showCalendar	Show calendar
previousMonth	Previous month
nextMonth	Next month
selectYear	Select year
yearSelection	Year selection
timeList	Time list
showTimeList	Show time list
time	Time
startTime	Start time
endTime	End time
startDate	Start date
endDate	End date
startDateTime	Start date-time
endDateTime	End date-time
removeDate	Remove date
removeTime	Remove time
removeDateTime	Remove date-time
selectedDateRanges	Selected date ranges
selectedTimeRanges	Selected time ranges
selectedDateTimeRanges	Selected date-time ranges
dateRangeCount	one: {count} date range other: {count} date ranges
timeRangeCount	one: {count} time range other: {count} time ranges
dateTimeRangeCount	one: {count} date-time range other: {count} date-time ranges
dayRangeCount	one: {count} range other: {count} ranges
disabledTimeRangeCount	one: {count} disabled range other: {count} disabled ranges
editRange	Edit
confirmEditRange	Confirm
cancelEditRange	Cancel
editRangeHint	Edit range {label}
editRangeStarted	Editing range {label}.
editRangeCommitted	Range updated to {label}.
editRangeCancelled	Edit cancelled.
selectedItems	Selected items
itemCount	one: {count} item other: {count} items
remove	Remove
removeTag	Remove tag
tagCount	one: {count} tag other: {count} tags
selectedTags	Selected tags
selectedOptions	Selected options
removeOption	Remove option
selectedCount	{count} selected
selectAnOption	Select an option
showOptions	Show options
loading	Loading...
showPassword	Show password
hidePassword	Hide password
show	Show
hide	Hide
textFormatting	Text formatting
bold	Bold
italic	Italic
strikethrough	Strikethrough
heading	Heading
link	Link
quote	Quote
orderedList	Ordered List
unorderedList	Unordered List
splitView	Split View
uploadFile	Upload file
uploadFiles	Upload files
uploadedFiles	Uploaded files
fileCount	one: {count} file other: {count} files
removeFile	Remove {name}
cancelFile	Cancel {name}
retryFile	Retry {name}
fileTooLarge	File exceeds the maximum size
fileTypeNotAccepted	File type not accepted
uploadFailed	Upload failed
uploadInterrupted	{name} was not uploaded. Remove it and pick the file again.
uploadPending	Wait for the upload to finish.
uploadErrored	{name} failed to upload. Retry it or remove it.
removeFailed	Could not remove the file
missingUploadService	File uploads are not configured
fileUploaded	{name} uploaded.
fileRemoved	{name} removed.
fileFailed	{name} failed to upload.

Plurals

A string with a {count} has an English default for each plural form, such as 1 item and 3 items. Your function receives the one that fits the count, and your i18n library does the plurals of its own language from params.count.

An element’s own props

An element’s prop for one of its strings, such as toggleAriaLabel or a field’s error message props, wins over the translate function. Use it for a string that should differ on one element only.

Dates, times and numbers

The elements that show dates, times or amounts format them with the browser’s Intl API. They use English (en) unless you set locale-id, whatever the browser’s language:

<gui-date-picker label="Fecha de inicio" locale-id="es-ES"></gui-date-picker>

The locale sets the order of the date parts, the names of the months and weekdays, the first day of the week and the 12 or 24-hour clock.

Right-to-left languages

Set dir="rtl" on any ancestor, usually <html>, and the components lay out right to left: the text, the padding, the icons and the calendar’s month arrows all mirror. Times keep their left-to-right order, as they read in right-to-left languages.

<html lang="ar" dir="rtl">
  …
</html>