LanguageProvider React-only

Open in Storybook

Some of the components in GDS use a variety of strings, whether it is for display or adding accessibility to components. Strings can appear as label for a close button in a Modal or as an invisible label that helps users with assistive technologies navigate the app.

Components which use language strings usually use one of two ways to retrieve them:

Through the context of LanguageProvider
Through local overrides

If both of them are missing a warning will be issued in the developer console. And in DEV mode you will additionally see the name of the key instead of the string.

Context

Loading demo…

HINT LanguageProvider should be as high up in the hierarchy as possible. Using it to wrap a single component is not recommended

Here’s an example of a very simple implementation with all strings defined, that are currently in use throughout GDS. Except for common, the first part in the key usually indicates the component in which this string will be used.

While LanguageProviders can be nested, they will completely replace the strings of all other LanguageProviders that are present up in the hierarchy of components.

Loading demo…

Local overrides

Even if there’s a LanguageProvider present, most components allow overrides via props. This currently differs from component to component in terms of naming.

Loading demo…

String replacements

Some components offer string replacements through variables. If the string contains the name of the variable wrapped in two curly braces like {{variable}} it will be replaced with the content of the variable before rendering.

Loading demo…

List of string keys

common.clear
common.close
common.collapse
common.expand
common.externalLink
common.help
common.menu
common.more
common.previous
common.next
common.page
common.copy
format.date
format.isoDate
format.screenreaderDate
accountNumber.mask
amount.currency.*
dropdown.selectYear
fixed.fixedButton.backToTop
form.label.optional
input.date.button
input.date.rangeButton
input.date.nextMonth
input.date.previousMonth
input.file.browse
input.file.delete
input.file.drag
input.file.drop
input.file.uploading
input.select.selectAll
input.select.selectedItems
input.select.selectedSummary
input.productSelect.selectAll
input.productSelect.selectedItems
input.time.hoursAnnouncement
input.time.minutesAnnouncement
spinner.message
stepper.compactInfo
table.sort.column
table.sort.select
table.sort.ascending
table.sort.descending
transaction.header.date
transaction.header.title
transaction.header.info
transaction.header.titleSecondary
transaction.header.infoSecondary
transaction.header.amount
transaction.header.amountSecondary
transaction.header.avatar
transaction.header.badges
transaction.header.indicators
transaction.header.misc
transaction.header.alert
transaction.header.statement
transaction.header.valuta
transaction.header.menu
transaction.header.overlay
transaction.header.detail
transaction.header.selectable
transaction.format.date
transaction.format.largeDate
transaction.format.largeDateYear
transaction.indicator.unread
transaction.indicator.star
transaction.indicator.attachment
transaction.indicator.file
transaction.indicator.location
transaction.indicator.additionalCard