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

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.

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.

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.

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.nextYear
• input.date.previousMonth
• input.date.previousYear
• 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